Javascript Primefaces对话框框架--来自menuitem的dialogReturn事件

Javascript Primefaces对话框框架--来自menuitem的dialogReturn事件,javascript,jquery,ajax,jsf,primefaces,Javascript,Jquery,Ajax,Jsf,Primefaces,我在Table.xhtml中有一个primefacesp:datatable,在使用dialog framework打开对话框的同一页面上有一个p:commandbutton。与对话框相关的内容位于dialog.xhtml中。我正在为Table.xhtml和Dialog.xhtml使用一个名为TableDialog.java的支持bean。当对话框关闭时,p:datatable中的值将使用 <p:ajax event="dialogReturn" listener=&q

我在
Table.xhtml
中有一个primefaces
p:datatable
,在使用dialog framework打开对话框的同一页面上有一个
p:commandbutton
。与对话框相关的内容位于
dialog.xhtml
中。我正在为
Table.xhtml
Dialog.xhtml
使用一个名为
TableDialog.java
的支持bean。当对话框关闭时,
p:datatable
中的值将使用

<p:ajax event="dialogReturn" listener="#{tableDialog.test}" update = ":form:colors"  />
这是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>
内部
p:menuitem
。在互联网上寻找工作时,我在找到了解决方案。上面说

“目前,您可以执行以下操作来解决问题:

  • menuitem
  • 添加
    p:commandbutton
    xhtml并添加id=“…”和style=“display:none”
  • 向菜单项添加onclick=“…”以使用javascript触发>命令按钮的click()事件,并引用名称应为“formID:buttonID”的按钮
  • 我是java、primefaces和ajax的新手,对javascript和jquery一无所知。因此,我无法确定在onclick=“……”中到底要写什么

    
    
    因此,每当我选择一个菜单项时,隐藏按钮就会被执行。非常感谢您的帮助。

    我在上找到了解决方案

    更新版本的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>
    
    
    #{col}
    函数triggerHiddenEvent(){
    document.getElementById(“表单:hiddenCommand”)。单击();
    }
    
    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:ajax event="dialogReturn" />
    
    <p:menuitem  value="Add" actionListener="#{tableDialog.updateValue}" 
                update=" :form:colors   "  onclick="........" >
    
      <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>