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

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

• javascript
• primefaces

3 Answers 3

You could try something like this:

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

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

window.onbeforeunload = function() {
    return 'There are unsaved changes!';
}

The value you return from the handler function is displayed in the pop-up dialog box. So you can just tell the user that there is some unsaved data and he might want to save it, and you can then leave it to the user whether he wants to navigate away or rather stay and save manually.

Alternatively you can use a 'Synchronous' AJAX request inside the 'onbeforeunload' handler to update changes to the server. It will stall the browser until the request pletes. It works for IE,FF,Chrome but won't work for Opera.

This is to let others know what I ended up doing in the end. I couldn't find any way to get it done with the version of Primefaces I was using. So ended up using the default browser alert box to notify the user and take the required steps.