How to display a Primefaces confirm dialog when navigating to another page?

Question

I am trying to display a Primefaces confirm dialog when user tries to navigate away from the page. The current page may have some unsaved data and hence the dialog to ask the user if he/she wants to save them before leaving the page.

At the moment I can just show the confirm dialog when user clicks away from the page like this:

function onBeforeUnload_Handler(){
 confirmation.show(); // confirmation is the "widgetVar" value of p:confirmDialog
} 

window.onbeforeunload = onBeforeUnload_Handler;

However the problem is that on displaying the dialog it navigates to the other page without waiting for a response from the user. I want the current page to wait for user response and perform an operation like "save" or "don't save" and then navigate away.

I tried adding "return false" after "confirmation.show()" but that causes the browser alert box to pop up instead.

(Primefaces 3.0.M1)

Many Thanks

Answer 1

You could try something like this:

<p:commandButton value="Next Page" onclick="confirmation.show();" />

<p:confirmDialog .....message="Are you sure?">
<p:commandButton value="Yes" action="nextpage?faces-redirect=true" />
<p:commandButton value="No" onclick="confirmation.hide();" />
</p:confirmDialog>