I have a primefaces p:datatable in Table.xhtml and have a p:mandbutton on the same page which I am using to open a dialog using dialog framework. The content related to dialog is in Dialog.xhtml. I am using a single backing bean named TableDialog.java for both Table.xhtml and Dialog.xhtml. When the dialog is closed, the values in the p:datatable are updated accordingly using the
<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors" />
The Table.xhtml is as follows
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=";
xmlns:h=";
xmlns:f=";
xmlns:ui=";
xmlns:p=";>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Table</title>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable id="colors" var="col" value="#{tableDialog.resourceList}" rowKey="#{col}"
selection="#{tableDialog.selected}" selectionMode="single">
<p:column headerText="Model">
#{col}
</p:column>
<f:facet name="footer">
<p:mandButton id="viewButton" value="Add" icon="ui-icon-search"
actionListener="#{tableDialog.updateValue}" >
<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors" onclick="this.form.submit()" />
</p:mandButton>
</f:facet>
</p:dataTable>
<p:contextMenu for="colors">
<p:menuitem value="Add" actionListener="#{tableDialog.updateValue}" update=" :form:colors " >
</p:menuitem>
</p:contextMenu>
</h:form>
</h:body>
</html>
and here is the Dialog.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=";
xmlns:h=";
xmlns:f=";
xmlns:ui=";
xmlns:p=";>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dialog</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid id="updateValuePanel" columns="2" style="margin-bottom:10px">
<h:outputLabel value="Attribute Value " />
<p:inputText id="attributeValue" value="#{tableDialog.attributeValue}" required="true" />
</h:panelGrid>
<p:mandButton id="saveValue" value="Submit" actionListener="#{tableDialog.saveValue}"
/>
<p:mandButton id="cancelValue" value="Cancel "
action="#{tableDialog.cancelValue}"
/>
<p:defaultCommand target="saveValue" />
</h:form>
</h:body>
</html>
the TableDialog.java contains the following code
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
@ManagedBean
@SessionScoped
public class TableDialog {
public ArrayList<String> resourceList=new ArrayList<String>();
private String selected;
String attributeValue = null;
public TableDialog(){
this.resourceList.add("Black");
this.resourceList.add("White");
}
public void updateValue(){
System.out.println("update value");
RequestContext context = RequestContext.getCurrentInstance();
Map<String, Object> options = new HashMap<String, Object>();
options.put("resizable", false);
options.put("dynamic", true);
options.put("height", 100);
options.put("width", 300);
options.put("contentHeight", 100);
options.put("contentWidth", 250);
context.openDialog("Dialog", options, null);
}
public void test(){
System.out.println("test");
}
public void cancelValue(){
RequestContext context = RequestContext.getCurrentInstance();
context.closeDialog(this.attributeValue);
System.out.println("cancel update resource attribute value");
this.attributeValue = null;
System.out.println("this.attributevalue = " + this.attributeValue);
}
public void saveValue(){
RequestContext context = RequestContext.getCurrentInstance();
if (this.attributeValue == null)
{
System.out.println("No value");
context.execute("noValueDialog.show()");
return;
}
System.out.println("this.attributevalue = " + this.attributeValue);
this.resourceList.add(this.attributeValue);
this.attributeValue = null;
context.update("form:resourceAttributeValueDataTable");
RequestContext.getCurrentInstance().update("form:resourceAttributeValueDataTable");
context.closeDialog(this.attributeValue);
System.out.println("after hidden button execute " );
}
public String getSelected() {
return selected;
}
public void setSelected(String selected) {
this.selected = selected;
}
public ArrayList<String> getResourceList() {
return resourceList;
}
public void setResourceList(ArrayList<String> resourceList) {
this.resourceList = resourceList;
}
public String getAttributeValue() {
return attributeValue;
}
public void setAttributeValue(String attributeValue) {
this.attributeValue = attributeValue;
}
}
everything is working fine.
My problem is:
I want to use p:contextMenu for opening the dialog. p:menuitem opens the dialog correctly but I am unable to update the p:dataTable after the dialog is closed. As the dialog framework only supports p:mandButton or p:mandLink I can't use
<p:ajax event="dialogReturn" />
inside p:menuitem. Searching for a work around on the internet I found the solution at .php?f=3&t=32131. It says
"For now, you can do the following to workaround :
- Remove
p:ajaxfrommenuitem- Add
p:mandbuttonxhtml and add id="..." and style="display:none"- Add onclick="..." to menuitem to use javascript to trigger the click() event of the >mandbutton, and reference the button where name should be "formID:buttonID"."
I am a newbie in java, primefaces and ajax and know nothing about javascript and jquery. So I am unable to figure out what exactly to write inside onclick="........"
<p:menuitem value="Add" actionListener="#{tableDialog.updateValue}"
update=" :form:colors " onclick="........" >
so that whenever I select a menu item the hidden button is executed. Any help will be highly appreciated.
I have a primefaces p:datatable in Table.xhtml and have a p:mandbutton on the same page which I am using to open a dialog using dialog framework. The content related to dialog is in Dialog.xhtml. I am using a single backing bean named TableDialog.java for both Table.xhtml and Dialog.xhtml. When the dialog is closed, the values in the p:datatable are updated accordingly using the
<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors" />
The Table.xhtml is as follows
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
xmlns:h="http://java.sun./jsf/html"
xmlns:f="http://java.sun./jsf/core"
xmlns:ui="http://java.sun./jsf/facelets"
xmlns:p="http://primefaces/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Table</title>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable id="colors" var="col" value="#{tableDialog.resourceList}" rowKey="#{col}"
selection="#{tableDialog.selected}" selectionMode="single">
<p:column headerText="Model">
#{col}
</p:column>
<f:facet name="footer">
<p:mandButton id="viewButton" value="Add" icon="ui-icon-search"
actionListener="#{tableDialog.updateValue}" >
<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors" onclick="this.form.submit()" />
</p:mandButton>
</f:facet>
</p:dataTable>
<p:contextMenu for="colors">
<p:menuitem value="Add" actionListener="#{tableDialog.updateValue}" update=" :form:colors " >
</p:menuitem>
</p:contextMenu>
</h:form>
</h:body>
</html>
and here is the Dialog.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
xmlns:h="http://java.sun./jsf/html"
xmlns:f="http://java.sun./jsf/core"
xmlns:ui="http://java.sun./jsf/facelets"
xmlns:p="http://primefaces/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dialog</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid id="updateValuePanel" columns="2" style="margin-bottom:10px">
<h:outputLabel value="Attribute Value " />
<p:inputText id="attributeValue" value="#{tableDialog.attributeValue}" required="true" />
</h:panelGrid>
<p:mandButton id="saveValue" value="Submit" actionListener="#{tableDialog.saveValue}"
/>
<p:mandButton id="cancelValue" value="Cancel "
action="#{tableDialog.cancelValue}"
/>
<p:defaultCommand target="saveValue" />
</h:form>
</h:body>
</html>
the TableDialog.java contains the following code
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
@ManagedBean
@SessionScoped
public class TableDialog {
public ArrayList<String> resourceList=new ArrayList<String>();
private String selected;
String attributeValue = null;
public TableDialog(){
this.resourceList.add("Black");
this.resourceList.add("White");
}
public void updateValue(){
System.out.println("update value");
RequestContext context = RequestContext.getCurrentInstance();
Map<String, Object> options = new HashMap<String, Object>();
options.put("resizable", false);
options.put("dynamic", true);
options.put("height", 100);
options.put("width", 300);
options.put("contentHeight", 100);
options.put("contentWidth", 250);
context.openDialog("Dialog", options, null);
}
public void test(){
System.out.println("test");
}
public void cancelValue(){
RequestContext context = RequestContext.getCurrentInstance();
context.closeDialog(this.attributeValue);
System.out.println("cancel update resource attribute value");
this.attributeValue = null;
System.out.println("this.attributevalue = " + this.attributeValue);
}
public void saveValue(){
RequestContext context = RequestContext.getCurrentInstance();
if (this.attributeValue == null)
{
System.out.println("No value");
context.execute("noValueDialog.show()");
return;
}
System.out.println("this.attributevalue = " + this.attributeValue);
this.resourceList.add(this.attributeValue);
this.attributeValue = null;
context.update("form:resourceAttributeValueDataTable");
RequestContext.getCurrentInstance().update("form:resourceAttributeValueDataTable");
context.closeDialog(this.attributeValue);
System.out.println("after hidden button execute " );
}
public String getSelected() {
return selected;
}
public void setSelected(String selected) {
this.selected = selected;
}
public ArrayList<String> getResourceList() {
return resourceList;
}
public void setResourceList(ArrayList<String> resourceList) {
this.resourceList = resourceList;
}
public String getAttributeValue() {
return attributeValue;
}
public void setAttributeValue(String attributeValue) {
this.attributeValue = attributeValue;
}
}
everything is working fine.
My problem is:
I want to use p:contextMenu for opening the dialog. p:menuitem opens the dialog correctly but I am unable to update the p:dataTable after the dialog is closed. As the dialog framework only supports p:mandButton or p:mandLink I can't use
<p:ajax event="dialogReturn" />
inside p:menuitem. Searching for a work around on the internet I found the solution at http://forum.primefaces/viewtopic.php?f=3&t=32131. It says
"For now, you can do the following to workaround :
- Remove
p:ajaxfrommenuitem- Add
p:mandbuttonxhtml and add id="..." and style="display:none"- Add onclick="..." to menuitem to use javascript to trigger the click() event of the >mandbutton, and reference the button where name should be "formID:buttonID"."
I am a newbie in java, primefaces and ajax and know nothing about javascript and jquery. So I am unable to figure out what exactly to write inside onclick="........"
<p:menuitem value="Add" actionListener="#{tableDialog.updateValue}"
update=" :form:colors " onclick="........" >
so that whenever I select a menu item the hidden button is executed. Any help will be highly appreciated.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Jan 5, 2014 at 7:56 arjarj 1191 gold badge3 silver badges10 bronze badges1 Answer
Reset to default 3I found the solution on How to trigger hidden JSF mandLink in JavaScript?
The updated version of Table.xhtml contains
<h:form id="form">
<p:dataTable id="colors" var="col" value="#{tableDialog.resourceList}" rowKey="#{col}"
selection="#{tableDialog.selected}" selectionMode="single">
<p:column headerText="Model">
#{col}
</p:column>
</p:dataTable>
<p:contextMenu for="colors">
<p:menuitem value="Add" onclick="triggerHiddenEvent(); return false;"
update=" :form:colors " >
</p:menuitem>
</p:contextMenu>
<p:mandButton id="hiddenCommand" styleClass="button" action="#{tableDialog.updateValue}" style="display:none">
<p:ajax event="dialogReturn" update = ":form:colors" />
</p:mandButton>
<h:outputScript >
function triggerHiddenEvent() {
document.getElementById("form:hiddenCommand").click();
}
</h:outputScript>
</h:form>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744872162a4598324.html
评论列表（0条）