Primefaces对话框+​​ commandButton

时间:2013-01-17 14:46:28

标签: jsf-2 dialog primefaces commandbutton

我正在尝试使用与<p:dialog>结合的primeface <p:commandButton>。在我的.xhtml页面中,我有一个选项列表和commandButton,用于显示对话框。 Dialog显示数据表,其中包含来自选项列表的目标值。 Dialog有两个按钮:取消和提交。我的问题是没有触发提交按钮。奇怪的是,commandButton的对话无效。

这是我的.xhtml:

<body>
   <ui:composition template="./../resources/mainTemplate.xhtml">
        <ui:define name="content">
            <h:form>
                <p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
                    <h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
                        <h:column>
                            #{skillslevel.skill.umiejetnosc}
                        </h:column>
                        <h:column>
                            <p:selectOneMenu value="#{skillslevel.level}" >
                                <f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
                            </p:selectOneMenu>
                        </h:column>
                    </h:dataTable>
                    <p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" />   THIS BUTTON IS NOT FIRED
                    <p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
                </p:dialog>
                <p:pickList value="#{editSkills.skills}" var="skill" effect="none"  
                itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}"  
                showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" 
                addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" >  
                    <f:facet name="sourceCaption">#{messages.skillsList}</f:facet>  
                    <f:facet name="targetCaption">#{messages.yourSkills}</f:facet>
                    <p:ajax event="transfer" listener="#{editSkills.onTransfer}" /> 
                    <p:column style="width:100%;">  
                        #{skill.umiejetnosc}  
                    </p:column> 
                </p:pickList>
                <p:commandButton value="#{messages.confirm}" action="#{editSkills.afterSubmit}" update="dlg" oncomplete="dlg.show()" />   THIS BUTTON WORKS FINE
                <p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/>
           </h:form>
        </ui:define>
    </ui:composition>
</body>

我已经标记了工作按钮但没有工作。 我需要做些什么才能让它发挥作用?

2 个答案:

答案 0 :(得分:19)

您可以尝试以下任一方式,我投票第一,这是一个更清洁的设计IMO

  1. <p:dialog/>移至一般<h:form/>之外,并将<h:form/> 置于

      <p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
          <h:form>
                <h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
                    <h:column>
                        #{skillslevel.skill.umiejetnosc}
                    </h:column>
                    <h:column>
                        <p:selectOneMenu value="#{skillslevel.level}" >
                            <f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
                        </p:selectOneMenu>
                    </h:column>
                </h:dataTable>
                <p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" />   THIS BUTTON IS NOT FIRED
                <p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
               </h:form>
            </p:dialog>
    
  2. appendToBody="false"添加到<p:dialog/>以确保对话框在DOM中的html表单中呈现,而不是自动重定位到HTML正文的末尾。但这可能会导致各种浏览器呈现不一致。

答案 1 :(得分:4)

<p:commandButton  value="Cancel" oncomplete="PF('yourDialogWidgedVarName').hide();" process="@this"  />

确保在调用widgetVar名称时使用&#39; 。你也可以使用immediate =&#34; true&#34;或者过程=&#34; @ this&#34;。