Primefaces dialog + commandButton

jsf-2 dialog primefaces commandbutton

74,384

Solution 1

You can try either of the following , I vote number one, it's a cleaner design IMO

Bring the <p:dialog/> outside of the general <h:form/> and put an <h:form/> inside it instead

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

Add appendToBody="false" to the <p:dialog/> to ensure the dialog is rendered within the html form in the DOM instead of being auto-relocated to end of HTML body. But this may cause inconsistent rendering in various browsers.

Solution 2

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

Make sure to use ' when u call the widgetVar name. You can also use immediate="true" or process="@this".

74,384

Author by

AjMeen

I'm studying computer science at the Technical University of Lodz

Updated on March 27, 2020

Comments

AjMeen about 4 years

I'm trying to use primefaces <p:dialog> combined with <p:commandButton>. In my .xhtml page I have a picklist and commandButton which is used to show a dialog. Dialog displays datatable with target values from picklist. Dialog has two buttons: cancel and submit. My problem is that submit button is not fired. What's strange, commandButton out of dialog works.

Here's my .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>

I've marked working button and not working one. What do I have to do to make it working?

AjMeen over 11 years

Thanks for your answer! I did what you have told me to do, but now I'm getting this error: /user/editSkills.xhtml @39,121 itemValue="#{skill.id}": The class 'java.lang.String' does not have the property 'id'. What is strange I think it's connected with picklist and it's weird, cause picklist works fine. What should I do?
kolossus over 11 years

@AjMeen, that's a different issue altogether,probably caused by the fact that #{skill.id} and #{skillslevel.level} are not the same datatype(one of them is a string, the other is something else). But now your commandButton is definitely firing.
AjMeen over 11 years

#{skillslevel.level} has nothing to do with this error, cause even if I remove skilsslevel part the error still shows up. I just probably need a converter. Anyway thanks for help!
kolossus over 11 years

@AjMeen, You're welcome. You should only need a converter if itemValue is a POJO/complex type. Look at this answer. The question directly correlates to yours
amphibient almost 9 years

i am having the same problem, tried this but didn't work: stackoverflow.com/questions/31350850/…
Eric over 7 years

you shouldn't need immediate="true" or process="@this". However your answer had the quick bit of information I needed. Thanks!