1

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>
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
K.Sorokin
  • 45
  • 4
  • 1
    Sort of contradictiory... it is obivous but you can't spot it... Analyze what your code does. You have a dialog in a form and the dialog is initially hidden. You click the button which shows the dialog but at the same time you update the form to a state were... correct, the dialog is initally hidden. You knowhere keep the dialog state server side. So the client-side action on it will get lost. – Kukeltje May 23 '19 at 13:23
  • Thanks you both for your answer. It works :-). And thanks for the great explanation. – K.Sorokin May 23 '19 at 18:21

1 Answers1

5

The core problem is essentially this:

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

    <p:dialog widgetVar="dlg">
        ...
    </p:dialog>
</h:form>
  • 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.

There are several solutions:

  1. Don't let update include the <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>

  2. 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>

  3. 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>

The recommended solution is 3.

See also:

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555