打开位于另一个.xhtml文件中的PrimeFaces对话框

时间:2014-01-02 07:13:17

标签: ajax jsf primefaces

我有许多相互关联的问题,因此问题的标题可能不合适。非常遗憾。

我想在p:inputText中设置p:commandButtonp:dialog,以便当用户按下该按钮或按时输入键输入的值 p:inputText将保存在数据库中。为此,我遵循了这个示例http://www.primefaces.org/showcase/ui/dialogForm.jsf,当我在一个单独的.xhtml文件中尝试它时没有其他对话框或命令按钮,它工作正常。

<h:body>
 <h:form id="form"> 
<p:commandButton id="showDialogButton" type="button" value="Show" onclick="PF('dlg').show()" />  

<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false">  


        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputLabel for="firstname" value="Firstname:" />  
            <p:inputText id="firstname" value="#{subjectController.attributeValue}" />  
        </h:panelGrid>  

        <p:commandButton id="submitButton" value="Submit" update=":form:display :form:firstname" action="#{subjectController.saveUpdateSubjectAttributeValue}" oncomplete="PF('dlg').hide();"/>  
             <p:defaultCommand target="submitButton"></p:defaultCommand> 

</p:dialog>  

<p:outputPanel id="display" style="display:block;margin-top:10px;">  
    <h:outputText id="name" value="Hello #{subjectController.attributeValue}" rendered="#{not empty subjectController.attributeValue}"/>  
</p:outputPanel>
 </h:form>
</h:body>

我最初拥有的.xhtml文件包含许多其他对话框和命令按钮。当我在该文件中使用相同的代码时,它无法正常工作。如果不正常工作,我的意思是说当按下回车键或提交按钮时,用户输入的值不会设置在托管bean中相应的inputText设置器中。要在按回车键或按钮之前拨打设定器,我需要在p:ajax标签内使用p:inputText。我尝试使用“p:ajax”,“mouseout”,“blur”等change个事件。它们适用于提交按钮,但不适用于回车键。然后我尝试了“keypress”和“keyup”等。他们都为两者工作,但p:inputText中的值的设定者在每次按键时被调用,这是不希望的。

我的第一个问题:

如果示例代码在单独的文件中正常工作,当我在同一文件中有其他对话框或命令按钮时,为什么它不起作用。在这两种情况下,我使用相同的托管bean。有什么区别?

假设在同一个文件中使用多个对话框可能导致问题,我想在单独的文件中声明这些对话框,以便我有 A.xhtmlB.xhtmlC.xhtml页面包含实际内容,每当我需要打开对话框时,所需的对话框都位于dialog.xhtml等文件中。作为JSF,Primefaces和Ajax的初学者,我对如何做到这一点感到困惑。在互联网上搜索我发现这篇文章与PrimeFaces dialog lazy loading (dynamic="true") does not work?相关。但在这种情况下,p:dialog位于同一页面上,但此对话框中包含的内容位于使用ui:include包含的另一个文件中。我试过这个,但它显示了相同的行为。

我的第二个问题: 有没有办法以编程方式从另一个文件打开一个对话框,例如如果我在同一个文件中的p:commandButtonA.xhtml中有p:dialog我可以使用

<p:commandButton id="submitButton" value="Submit" update=":form:display :form:firstname" action="#{subjectController.saveUpdateSubjectAttributeValue}" oncomplete="PF('dlg').hide();"/>  

并且在相应的subjectController中我有

saveUpdateSubjectAttributeValue(){
    RequestContext context = RequestContext.getCurrentInstance(); 
                context.openDialog("openDialog");
                // or 
                context.execute("openDialog");
}

但如果“openDialog”位于B.xhtml怎么办?

据我所知,我可以在p:dialogui:composition)中使用B.xhtml,并在ui:include中使用A.xhtml。但我对调用openDialog.open()openDialog.hide()的方式和位置感到困惑?

2 个答案:

答案 0 :(得分:0)

我试图复制你在这里发布的行为,我相信原因可能是Yipitalp提到的其他地方。

无论如何,这里是我使用的示例代码,可能符合您的预期(Primefaces 4):

受管Bean

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.context.RequestContext;

@ManagedBean
@ViewScoped
public class DialogBean implements Serializable {

    private String attribute1;

    private String attribute2;

    private String attribute3;

    private String dlg;

    public void openDialog() {
        RequestContext context = RequestContext.getCurrentInstance();
        context.execute("PF('" + dlg + "').show()");
    }

    public String getAttribute1() {
        return attribute1;
    }

    public void setAttribute1(String attribute1) {
        this.attribute1 = attribute1;
    }

    public String getAttribute2() {
        return attribute2;
    }

    public void setAttribute2(String attribute2) {
        this.attribute2 = attribute2;
    }

    public String getAttribute3() {
        return attribute3;
    }

    public void setAttribute3(String attribute3) {
        this.attribute3 = attribute3;
    }

    public String getDlg() {
        return dlg;
    }

    public void setDlg(String dlg) {
        this.dlg = dlg;
    }
}

视图

请注意,我在视图中为每个对话框使用不同的表单。

<h:form>
    <h:panelGrid columns="2" style="margin-bottom:10px">  
        <h:outputLabel for="dlg" value="Dlg:" />  
        <p:selectOneMenu id="dlg" value="#{dialogBean.dlg}" >
            <f:selectItem itemLabel="dlg1" itemValue="dlg1" />
            <f:selectItem itemLabel="dlg2" itemValue="dlg2" />
            <f:selectItem itemLabel="dlg3" itemValue="dlg3" />
        </p:selectOneMenu>
    </h:panelGrid>  

    <p:commandButton id="submitButton" value="Submit" action="#{dialogBean.openDialog}"/>  
    <p:defaultCommand target="submitButton" />
</h:form>


<p:button id="showDialogButton1" value="Show 1" onclick="PF('dlg1').show();
        return false;" />
<p:button id="showDialogButton2" value="Show 2" onclick="PF('dlg2').show();
        return false;" />
<p:button id="showDialogButton3" value="Show 3" onclick="PF('dlg3').show();
        return false;" />

<br />

<p:dialog header="Enter FirstName" widgetVar="dlg1" resizable="false">  
    <h:form>
        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputLabel for="firstname" value="Firstname:" />  
            <p:inputText id="firstname" value="#{dialogBean.attribute1}" />  
        </h:panelGrid>  

        <p:commandButton id="submitButton" value="Submit" oncomplete="PF('dlg1').hide();"/>  
        <p:defaultCommand target="submitButton" />
    </h:form>
</p:dialog>

<p:dialog header="Enter FirstName" widgetVar="dlg2" resizable="false">  
    <h:form>
        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputLabel for="firstname" value="Firstname:" />  
            <p:inputText id="firstname" value="#{dialogBean.attribute2}" />  
        </h:panelGrid>  

        <p:commandButton id="submitButton" value="Submit" oncomplete="PF('dlg2').hide();"/>  
        <p:defaultCommand target="submitButton" />
    </h:form>
</p:dialog>

<p:dialog header="Enter FirstName" widgetVar="dlg3" resizable="false">  
    <h:form>
        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputLabel for="firstname" value="Firstname:" />  
            <p:inputText id="firstname" value="#{dialogBean.attribute3}" />  
        </h:panelGrid>  

        <p:commandButton id="submitButton" value="Submit" oncomplete="PF('dlg3').hide();"/>  
        <p:defaultCommand target="submitButton" />
    </h:form>
</p:dialog>

<p:outputPanel autoUpdate="true" style="border: 1px solid black; margin-top:10px;">
    Value 1: 
    <h:outputText id="v1" value="#{dialogBean.attribute1}" />
    <br />
    Value 2: 
    <h:outputText id="v2" value="#{dialogBean.attribute2}" />
    <br />
    Value 3: 
    <h:outputText id="v3" value="#{dialogBean.attribute3}" />
</p:outputPanel>

我希望能给你一些线索!

答案 1 :(得分:0)

我能够使用DialogFramework解决我的大部分问题。我有一个Menu.xhtml页面,其中包含p:tieredMenu p:layoutUnit position="north",其中p:layoutUnit使用该页面选择要打开的页面。 position="center" ui:include Menu.xhtml使用h:form包含该页面,具体取决于选择。 id="form"页面在h:body内包含h:form <p:layoutUnit position="center">,其他所有内容都放在此Person.xhtml内。 ui:composition内可以包含许多页面,具体取决于选择。其中一个是p:fieldset(包含p:fieldset内的所有内容)。它包含p:dataTable。在p:fieldset内,有3 p:contextMenu。在p:contextMenu之外,我为每个数据表放置了3 <p:menuitem value="Update" actionListener="#{controller.updateAttributeValue}" /> 个。其中一个public void updateAttributeValue(){ System.out.println("update attribute value"); RequestContext context = RequestContext.getCurrentInstance(); context.openDialog("selectCar2"); this.attributeValue = null; } 我放置了

selectCar2.xhtml

并且相应的函数包含

 <h:body>  
        <h:form>
          <h:panelGrid id="updateAttributeValuePanel" columns="2" style="margin-bottom:10px">  
          <h:outputLabel value="Attribute Value " />
           <p:inputText id="attributeValue" value="#{controller.attributeValue}" required="true" />
        </h:panelGrid>  

        <p:commandButton id="saveUpdateAttributeValue" value="Submit" actionListener="#{controller.saveUpdateAttributeValue}" 
                />  
                <p:commandButton id="cancelUpdateAttributeValue" value="Cancel "
                action="#{controller.cancelUpdateAttributeValue}"
                />
        <p:defaultCommand target="saveUpdateAttributeValue" />
              </h:form>
              </h:body> 

public void saveUpdateAttributeValue(){ RequestContext context = RequestContext.getCurrentInstance(); System.out.println("this.attributevalue = " + this.attributeValue); ////save value in database this.attributeValue = null; context.update(":form:resourceAttributeValueDataTable"); //also tried context.update("resourceAttributeValueDataTable"); context.closeDialog(this.attributeValue); } and public void cancelUpdateAttributeValue(){ RequestContext context = RequestContext.getCurrentInstance(); context.closeDialog(this.attributeValue); System.out.println("cancel update attribute value"); this.attributeValue = null; System.out.println("this.attributevalue = " + this.attributeValue); } 包含以下代码

p:fieldset

相应的保存功能如下

h:form

对话框打开,值已成功保存在数据库中。现在唯一的问题是相应的数据表没有更新,我需要刷新页面才能看到更新的值。以前我的对话框也在<p:commandButton id="saveUpdateAttributeValue" value="Submit" actionListener="#{controller.saveUpdateAttributeValue}" update = ":form:attributeValueDataTable "/> 之外的同一页面中,我没有在对话框中使用context.update(":form:resourceAttributeValueDataTable"); //or context.update("resourceAttributeValueDataTable"); 所以我将数据表更新为

{{1}}

但现在它们有两个不同的文件和两种不同的形式,所以我不知道在这种情况下如何更新?我试过用

{{1}}

但数据表未更新。任何帮助将受到高度赞赏。