Search code examples
jsfjsf-2primefacesdialog

p:commandButton action not working in p:confirmDialog


I have a functionality where I have to call my managed bean through my confirmation dialog box which is for delete button. When the user clicks on delete button there is a confirmation dialog box that pops up and onclick of "Yes" my relative managed bean should get called. But I am not able to do it.

<p:commandButton id="Delete" action="#{tbeanId.delete}" icon="ui-icon ui-icon-trash" 
   value="Delete" title="GDeleteButton" ajax="false" onclick="PF('groupDeleteConfirm').show();" type="button">
   <p:confirm header="Delete Record" message="Are you sure about deleting this record?" icon="ui-icon-alert"/>
</p:commandButton>

<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" widgetVar="groupDeleteConfirm">
   <p:commandButton title="GDelYesButton" value="Yes" oncomplete="PF('groupDeleteConfirm').hide()" " />
   <p:commandButton title="GDelNoButton" value="No" onclick="PF('groupDeleteConfirm').hide()" type="button" />
</p:confirmDialog>

Solution

  • When you use the p:confirmDialog with global="true" the confirm/cancel buttons are (somewhat unintuitively) identified by these 2 styleClasses:

    styleClass="ui-confirmdialog-yes"
    styleClass="ui-confirmdialog-no"
    

    Then the action will be called and show()/hide() will happen automatically. Ajax should be true on the main button and you don't need type="button" so all in all it will be much simpler:

    <p:commandButton id="delete" 
                     action="#{trafficExpenseItemsMBean.deleteExpenseItemsGroup}" 
                     icon="ui-icon ui-icon-trash" 
                     value="Delete" 
                     title="GDeleteButton">
        <p:confirm header="Delete Record" 
                   message="Are you sure about deleting this record?" 
                   icon="ui-icon-alert"/>
    </p:commandButton>
    
    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
        <p:commandButton title="GDelYesButton" value="Yes" styleClass="ui-confirmdialog-yes"/>
        <p:commandButton title="GDelNoButton" value="No" styleClass="ui-confirmdialog-no" />
    </p:confirmDialog>
    

    Another option would be to make it non-global. Then you'd need to move the action to the yes-button and the message to the p:confirmDialog as in

    <p:commandButton id="delete" 
                     icon="ui-icon ui-icon-trash" 
                     value="Delete" 
                     title="GDeleteButton"
                     onclick="PF('groupDeleteConfirm').show()">
    </p:commandButton>
    <p:confirmDialog message="Are you sure about deleting this record?" 
                     showEffect="fade"
                     hideEffect="explode" 
                     widgetVar="groupDeleteConfirm">
        <p:commandButton title="GDelYesButton" 
                         value="Yes" 
                         action="#{trafficExpenseItemsMBean.deleteExpenseItemsGroup}" 
                         oncomplete="PF('groupDeleteConfirm').hide()" 
                         update=":growl"/>
        <p:commandButton title="GDelNoButton" 
                         value="No" 
                         oncomplete="PF('groupDeleteConfirm').hide()"/>
    </p:confirmDialog>
    

    I'm not sure you really want those title's on the buttons though, as they are shown to the user.