Confirmation Dialog before calling ajax request on change event of SelectOneMenu

Question

I have a primefaces SelectOneMenu Object and a panel below which has multiple panels conditionally rendered based on the SelectOneMenu value. So I have included a primefaces p:ajax request within the SelectOneMenu. The ajax request is firing properly and the panel is displayed properly without any issue.

But now I want to add a confirmation before they change the SelectOneMenu to proceed with the ajax request to warn them that any values they entered in panel will be lost. So I added a onstart event of p:ajax and included a javascript function which has the javascript confirm. Problem is when the user selects the "Cancel" button, the ajax is not firing but my SelectOneMenu has the new value selected. I thought of calling the ajax request in click event. But primefaces SelectOneMenu doesn't have click event.

JSF Code:

<p:selectOneMenu id="methodOfId" value="#{cc.attrs.comboBoxValue}">
<f:selectItem itemValue="-1" itemLabel=""/>
<f:selectItems value="#{cc.attrs.comboBoxOptions}" var="methodOfId" itemValue="#{methodOfId.id}" itemLabel="#{methodOfId.name}"/>
<f:param name="cid" value="#{cc.attrs.beanConversationID}" />
<p:ajax update="dynamicPanels" process="@this" onstart="return confirmMethodOfIdChange()"/>
</p:selectOneMenu>

<p:panel id="dynamicPanels">
    <ui:include src="#{cc.attrs.panelSrc}" />
</p:panel>

Javascript Code:

function confirmMethodOfIdChange() {
var userResponse = confirm("Are you sure you want to change your selection?");
     return userResponse;
}

Now how can I change the SelectOneMenu to display its old value? I thought of even using the f:ajax inside jsf SelectOneMenu with the below javascript code. It asks for confirmation but I hit OK in confirm box, it does not execute the ajax request.

function confirmMethodOfIdChange(data) {
    alert("inside confirm");    
var ajaxStatus = data.status; // Can be "begin", "success" and "complete"

if (ajaxStatus == 'begin'){
    var userResponse = confirm("Are you sure you want to change your selection?");
    if (userResponse) {
        return true;
    } else {
        return false;
    }
}

return true;

}

Answer 1

you can use <p:confirmDialog> component and combine it with selectOneMenu widgetVar. just remove <p:ajax> and put your action to Yes button in confirm dialog. if you click Yes action will be performed. if no the change will be reverted.

<p:selectOneMenu widgetVar="ps" onchange="confirm.show()">
    <f:selectItem itemValue="1" itemLabel="1"/>
    <f:selectItem itemValue="2" itemLabel="2"/>
    <f:selectItem itemValue="3" itemLabel="3"/>
</p:selectOneMenu>

<p:confirmDialog widgetVar="confirm" message="Are you sure you want to change your selection?" header="WARN!" severity="alert">
    <p:commandButton value="Yes" process="@form" update="myform" oncomplete="confirm.hide()" />
    <p:commandButton value="No" type="button" 
        onclick="ps.selectValue(ps.preShowValue.val());confirm.hide()" />
</p:confirmDialog>