Confirmation Dialog before calling ajax request on change event of SelectOneMenu

ajax, javascript, jsf

Solution

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>

Problem

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; } ```

Original source