p:commandButton action not working in p:confirmDialog

Question

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 1

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.

Solution 2

When you use a p:commandButton for the action that needs to be done on the server, you can not use type="button" because that is for Push buttons which are used to execute custom javascript without causing an ajax/non-ajax request to the server.

For this purpose, you can dispense the type attribute (default value is "submit") or you can explicitly use type="submit".

Hope this will help someone!

Comments

[sTg]

Jaqen:I appreciate your answer on JSF. I had one similar problem faced as mentioned this question. Can you pls help me out. stackoverflow.com/questions/24998212/…