Primefaces 对话框框架——来自 menuitem 的 dialogReturn 事件答案

【问题标题】：Primefaces Dialog Framework -- dialogReturn event from menuitemPrimefaces 对话框框架——来自 menuitem 的 dialogReturn 事件
【发布时间】：2014-01-22 18:14:26
【问题描述】：

我在Table.xhtml 中有一个primefaces p:datatable 并在我用来使用对话框框架打开对话框的同一页面上有一个p:commandbutton。对话相关内容在Dialog.xhtml。我对Table.xhtml 和Dialog.xhtml 都使用了一个名为TableDialog.java 的支持bean。当对话框关闭时，p:datatable 中的值会相应地使用

<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors"  />

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>

这里是 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>

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;
}


}

一切正常。

我的问题是：

我想使用p:contextMenu 打开对话框。 p:menuitem 正确打开对话框，但在对话框关闭后我无法更新p:dataTable。由于对话框框架只支持p:commandButton或p:commandLink我不能用

<p:ajax event="dialogReturn" />

在p:menuitem 内。在互联网上搜索解决方法，我在http://forum.primefaces.org/viewtopic.php?f=3&t=32131 找到了解决方案。它说

“目前，您可以执行以下解决方法：

从menuitem 中删除p:ajax

添加p:commandbuttonxhtml 并添加id="..." 和style="display:none"

将 onclick="..." 添加到 menuitem 以使用 javascript 触发 >commandbutton 的 click() 事件，并引用名称应为“formID:buttonID”的按钮。”

我是 java、primefaces 和 ajax 的新手，对 javascript 和 jquery 一无所知。所以我无法弄清楚在 onclick="........" 中到底要写什么

<p:menuitem  value="Add" actionListener="#{tableDialog.updateValue}" 
            update=" :form:colors   "  onclick="........" >

这样每当我选择一个菜单项时，就会执行隐藏按钮。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery ajax jsf primefaces

【解决方案1】：

我在How to trigger hidden JSF commandLink in JavaScript?找到了解决方案

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>

【讨论】：