jquery: synchronous behaving jquery ui dialog ?

Question

when clicking a link, I have a jquery ui dialog prompted whether the user would like to navigate to the next page or cancel this navigation request.

the problem is dealing with AJAX web applications or javascript in href where it doesn't have a clear href URL location value set.

How can I create an synchronously behaving jquery ui dialog that asks for user input before navigation, and if user inputs cancel, the no navigation would result.

I have done this with synchronous AJAX requests but this is a problem for jquery UI dialog.

Answer 1

You can't do this with a dialog (modern browsers prevent you from annoying the user, due to over-zealous advertisers abusing the hell out of it). The closest you can do is a prompt (browser-specific styling, like SO does) using the window.onbeforeunload event, like this:

window.onbeforeunload = function() { return "Are you sure you want to leave?"; }

This won't have jQuery UI styling, or really depend on jQuery or jQuery UI in any way, but it's the most solid solution.

You could I suppose cancel every navigation event, store the href of anchors, action of forms, etc... but that would get pretty messy and still not have all the native browser behavior for those events.