Primefaces SelectBooleanCheckbox with confirmation

Question

I would like to show confirmation dialog on select/unselect checkbox in primefaces. I have tried to

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}">
    <p:confirm message="Are you sure?"/>
</p:selectBoooleanCheckBox>

but it doesn't work since selectBooleanCheckBox is not Confirmable. Is there any workaround to solve this problem?

Answer 1

You want to show a notification(info, alert,...) on a change of the checkbox. Do this :

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"
  onchange="if(!confirm('Your warning or information message here!!!')) 
   return false">
   <p:ajax listener="#{myBean.yourMethodHere()}" 
      update="theComponentYouWantToUpdate" />
</p:selectBoooleanCheckBox>

Answer 2

One way is to create your own confirmDialog like

<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?">
    <p:commandButton value          =   "Yes"
                     action         =   "#{myBean.checkConfirmedAction}"
                     oncomplete     =   "PF('myOwnConfirmDialog').hide()"/>

    <p:commandButton value          =   "No" 
                     action         =   "#{myBean.checkCancelledAction}"
                     oncomplete     =   "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/>
</p:confirmDialog>

and then use onchange event to open the confirmDialog:

<p:selectBooleanCheckbox    value="#{myBean.checkBoxValue}" 
                            onchange="PF('myOwnConfirmDialog').show()" 
                            widgetVar="checkConfirmwdgt">
</p:selectBooleanCheckbox>

EDIT: I made a typo and a mistake on my answer. The typo was actually using <p:confirm> inside <p:selectBooleanCheckbox> (you are right, selectBooleanCheckbox isnt confirmable.) The mistake was that <p:selectBooleanCheckbox> doesn't fires onclick, but only onblur, onchange and onfocus. Using onchange will work.

Answer 3

I solved it a different way - didn´t want to wait till PrimeFaces implements the Interface. I´m displaying two "commandButton"s - only one of them is rendered dependent on state. They are enclosed by a form - or you can use a named panel ("selectProductUsageForm" in my example) which is updated via AJAX. The first one is representing the active (toggled) state - the second the untoggled state.

The solution was to mimic the display behaviour - which Primefaces encapsulates in the CSS-class "ui-state-active" (theme.css). I copied the contents of the CSS-class to my own CSS-class "man-ui-state-active" and assigned it to the first button.

 <h:form id="selectProductUsageForm" 
    rendered="#{productManager.mayEditSelected}">
   <span class="productGroupUsageBtnContainer">


    <p:commandButton 
        value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active"
        icon="ui-icon-check"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    <p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})" 
        icon="ui-icon-close"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    </span>
   </h:form>

CSS

.ui-button.man-ui-state-active {
    background-color: #e6e6e6;
    background-color: #d9d9d9 \9;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}