p:commandButton不能显示p:对话框 [英] p:commandButton doesn't dislpay p:dialog

问题描述

我在单击时显示对话框有问题.这是显而易见的，但我无法发现该错误.我已经坚持了好几天，这太疯狂了.你能帮我吗?

i have a problem with the display of a dialog on a click. It's a obvious one but i can't spot the bug. I've been stuck on this for days, it's crazy. Can you help me please.

<h:form id="form">

<p:commandButton
    rendered="#{characterBean.characterSession.characterName ne null}"
    value="#{characterBean.characterSession.title.titleName}"
    icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
    update="@form"/>

<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
    widgetVar="dlg" dynamic="true" closable="false" resizable="false"
    showEffect="fade" hideEffect="fade">
    <h:panelGroup>
        <p:messages autoUpdate="true" />
        <h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
            value="#{characterBean.characterSession.title}">
            <f:selectItems value="#{characterBean.titleUnlocked}" var="t"
                itemValue="#{t}" itemLabel="#{t.titleName}" />
        </h:selectOneMenu>
        <hr />
        <h:panelGrid columns="2" style="width: 100%; text-align:center">
            <p:commandButton value="#{i18n['general.submit']}"
                icon="fa fa-check"
                actionListener="#{characterBean.updateCharacterTitle}"
                oncomplete="PF('dlg').hide();" update="@form" />

            <p:commandButton value="#{i18n['general.cancel']}"
                icon="fa fa-close" action="#{characterBean.submitCancel}"
                oncomplete="PF('dlg').hide();" update="@form" process="@this" />
        </h:panelGrid>
        <p:remoteCommand name="updateForm()" process="@this" update="@form" />
    </h:panelGroup>
</p:dialog>

</h:form>

推荐答案

本质上，核心问题是:

<h:form>
    <p:commandButton onclick="PF('dlg').show();" update="@form"/>

    <p:dialog widgetVar="dlg">
        ...
    </p:dialog>
</h:form>

• <p:dialog>的默认状态为隐藏.
• onclick显示对话框.
• update更新<h:form>的全部内容.
• <p:dialog>也包含在此更新中.
• 所以<p:dialog>再次被隐藏了.
• The default state of <p:dialog> is hidden.
• The onclick shows the dialog.
• The update updates the entire content of the <h:form>.
• The <p:dialog> is also included in the update.
• So, the <p:dialog> gets hidden again.

有几种解决方案:

1. 不要让update包含<p:dialog>.

<h:form>
    <h:panelGroup id="outsideDialog">
        <p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
    </h:panelGroup>

    <p:dialog widgetVar="dlg">
        ...
    </p:dialog>
</h:form>

• 将onclick替换为oncomplete，因为它在update之后之后运行.

• Replace onclick by oncomplete as it runs after the update.

  <h:form>
      <p:commandButton update="@form" oncomplete="PF('dlg').show();" />
  
      <p:dialog widgetVar="dlg">
          ...
      </p:dialog>
  </h:form>
  

• 将<p:dialog>移到<h:form>之外，并为其提供自己的<h:form>.

• Move <p:dialog> outside the <h:form> and give it its own <h:form>.

  <h:form>
      <p:commandButton update="@form :dlg" oncomplete="PF('dlg').show();" />
  </h:form>
  
  <p:dialog id="dlg" widgetVar="dlg">
      <h:form>
          ...
      </h:form>
  </p:dialog>
  

  或者，取决于您是否实际需要更新对话框的内容

  or, depending on whether you actually need to update the dialog's contents or not

  <h:form>
      <p:commandButton onclick="PF('dlg').show();" update="@form" />
  </h:form>
  
  <p:dialog widgetVar="dlg">
      <h:form>
          ...
      </h:form>
  </p:dialog>
  

推荐的解决方案是3.

• 按下PrimeFaces p:commandButton时事件的执行顺序
• 如何使用< h:form>在JSF页面中?单一表格?多种形式?嵌套表格?
• p:commandbutton动作在p:dialog内不起作用
• Execution order of events when pressing PrimeFaces p:commandButton
• How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
• p:commandbutton action doesn't work inside p:dialog

这篇关于p:commandButton不能显示p:对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！