Question

We want to display a confirmation dialog if a user changes values in a selectOneMenu. This works quite good with the browsers native confirm() method because it blocks until the user decides. Is there an elegant (preferable client-side) solution to do this with primefaces dialogs so the look is consistent over different browsers?

Current solution:

<p:selectOneMenu id="som" value="#{foo.item}">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
    <p:ajax event="change" onstart="return confirmChange()" />
</p:selectOneMenu>

<script type="text/javascript">
    function confirmChange() {
        return confirm("O'RLY?");
    }
</script>

Answer 1

You could use PrimeFaces’ <p:confirmDialog> or even just <p:dialog>.

<p:selectOneMenu id="som" value="#{foo.item}" onchange="confirm.show()">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
</p:selectOneMenu>
<p:confirmDialog widgetVar="confirm" message="ORLY?" header="Confirm" severity="alert">
    <p:commandButton value="Yes" action="#{bean.submit}" process="som" oncomplete="confirm.hide()" />  
    <p:commandButton value="No" type="button" onclick="confirm.hide()" />
</p:confirmDialog> 

Perform the confirmation job in #{bean.submit}. You could if necessary abstract this all away with a tag file or a composite component so that it’s nicer reuseable.

<p:selectOneMenu id="som" value="#{foo.item}" onchange="confirm.show()">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
</p:selectOneMenu>
<my:confirmDialog id="confirm" message="ORLY?" action="#{bean.submit}" process="som" />

Note that there’s no means of “cancelling” ajax requests here. You just don’t invoke it until really confirmed.