Primefaces dialog + commandButton

Question

I\'m trying to use primefaces combined with . In my .xhtml page I have a picklist and commandButton which i

Answer 1

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

Answer 2

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

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

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