Prevent navigation away from dialog

Prevent navigation away from dialog

Hi all,

I'm new to jQuery mobile and am trying to build a PhoneGap app using jQuery mobile.

I'm a bit stuck with the following issue.

I have a login dialog as a form that I want to show the user if they need to log in.  I don't want them to be able to navigate away from this login form until they have signed in.  I've removed all links in the dialog but the hardware back button still works.

I've tried the following:

  1. function onDocumentReady() {
  2.     document.addEventListener("deviceready", onDeviceReady, true);
  3.    
  4.     $("#loginDialog").on("pagebeforehide",
  5.         function(event) {
  6.             event.preventDefault();
  7.             console.info('in pagebeforehide');
  8.         }
  9.    
  10.     );
  11. }
This is not working though.  The code gets called (I've added a breakpoint) but the call to event.preventDefault() is not stopping the navigation away from the page.

Thanks in advance for your help.