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>
The core problem is essentially this:
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="@form"/>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
<p:dialog>
is hidden. onclick
shows the dialog. update
updates the entire content of the <h:form>
. <p:dialog>
is also included in the update. <p:dialog>
gets hidden again. There are several solutions:
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>
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.