javascript Primefaces 对话框框架——来自菜单项的 dialogReturn 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20931384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Primefaces Dialog Framework -- dialogReturn event from menuitem
提问by arj
I have a primefaces p:datatablein Table.xhtmland have a p:commandbuttonon 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.javafor both Table.xhtmland Dialog.xhtml. When the dialog is closed, the values in the p:datatableare updated accordingly using the
我有一个primefaces p:datatable，Table.xhtml并且p:commandbutton在我用来使用对话框框架打开对话框的同一页面上有一个。对话框相关的内容在Dialog.xhtml. 我使用一个名为单个后台beanTableDialog.java两个Table.xhtml和Dialog.xhtml。当对话框关闭时， 中的值p:datatable会使用
<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors" />
The Table.xhtmlis as follows
的Table.xhtml是如下
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/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:commandButton 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:commandButton>
</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
这是Dialog.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/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:commandButton id="saveValue" value="Submit" actionListener="#{tableDialog.saveValue}"
/>
<p:commandButton id="cancelValue" value="Cancel "
action="#{tableDialog.cancelValue}"
/>
<p:defaultCommand target="saveValue" />
</h:form>
</h:body>
</html>
the TableDialog.java contains the following code
TableDialog.java 包含以下代码
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:contextMenufor opening the dialog. p:menuitemopens the dialog correctly but I am unable to update the p:dataTableafter the dialog is closed. As the dialog framework only supports p:commandButtonor p:commandLinkI can't use
我想p:contextMenu用于打开对话框。p:menuitem正确打开对话框，但p:dataTable在对话框关闭后我无法更新。由于对话框框架只支持p:commandButton或者p:commandLink我不能使用
<p:ajax event="dialogReturn" />
inside p:menuitem. Searching for a work around on the internet I found the solution at http://forum.primefaces.org/viewtopic.php?f=3&t=32131. It says
里面p:menuitem。在互联网上寻找解决方法，我在http://forum.primefaces.org/viewtopic.php?f=3&t=32131找到了解决方案。它说
"For now, you can do the following to workaround :
- Remove
p:ajaxfrommenuitem- Add
p:commandbuttonxhtml and add id="..." and style="display:none"- Add onclick="..." to menuitem to use javascript to trigger the click() event of the >commandbutton, and reference the button where name should be "formID:buttonID"."
“目前，您可以执行以下操作来解决：
- 删除
p:ajax从menuitem- 添加
p:commandbuttonxhtml 并添加 id="..." 和 style="display:none"- 将 onclick="..." 添加到 menuitem 以使用 javascript 触发 >commandbutton 的 click() 事件，并引用名称应为“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="........"
我是 java、primefaces 和 ajax 的新手，对 javascript 和 jquery 一无所知。所以我无法弄清楚在 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.
这样每当我选择一个菜单项时，就会执行隐藏的按钮。任何帮助将不胜感激。
采纳答案by arj
I found the solution on How to trigger hidden JSF commandLink in JavaScript?
我找到了有关如何在 JavaScript 中触发隐藏的 JSF commandLink的解决方案？
The updated version of Table.xhtml contains
Table.xhtml 的更新版本包含
<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:commandButton id="hiddenCommand" styleClass="button" action="#{tableDialog.updateValue}" style="display:none">
<p:ajax event="dialogReturn" update = ":form:colors" />
</p:commandButton>
<h:outputScript >
function triggerHiddenEvent() {
document.getElementById("form:hiddenCommand").click();
}
</h:outputScript>
</h:form>
