URL being updated on preventdefault

URL being updated on preventdefault

Have a problem that is driving me insane! I suspect I am doing something wrong...

I am using jQuery mobile 1.4.5 with multiple pages in the same HTML file. jQuery version: 1.11.3

I have a page #mainregister on which I check for any user changes. If they try to navigate away, I stop the navigation using this code (using info I found on SO):

  1.         $(document).on("pageinit", '#mainregister', function(){
  2.         $(document).on('pagebeforechange', function(e, data){ 
  3.             ResetTimeOutTimer(); // Reset inactivity timer
  4.             if (typeof data.toPage != "string") {
  5.                 if (isDirty) {
  6.                    
  7.                     var to = data.toPage.attr('id');
  8.                     to = '#' + to;
  9.                     console.log(to);
  10.                     if(to !== '#mainregister')
  11.                     {
  12.                        var confirmationMessage = 'It looks like you have been editing something. '
  13.                                     + 'If you leave before saving, your changes will be lost.';
  14.                    
  15.                         e.preventDefault();
  16.                         e.stopPropagation();
  17.                         isDirty =  false;
  18.                         console.log(to);
  19.                         $("#leavebutton").on('click', function(){
  20.                             changePage(to, false);
  21.                             return false; // This is to prevent events bubbling up and causing double page flips
  22.                                           // See https://github.com/jquery/jquery-mobile/issues/2369#issuecomment-4830800
  23.                                             // and https://css-tricks.com/return-false-and-prevent-default/
  24.                         });
  25.                         $("#leavetext").html(confirmationMessage);                 
  26.                         $('#confirmLeave').popup('open');
  27.                         return false;
  28.                     }
  29.                 }
  30.             }
  31.         });
  32.        
  33.     });

This brings up a popup asking the user if they wish to Save or Leave. This popup is defined as:

  1.     <!-- Leave Warning Popup -->
  2.             <div data-role="popup" id="confirmLeave" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
  3.                 <div data-role="header" data-theme="a" class="ui-corner-top">
  4.                     <h1>Info</h1>
  5.                 </div>
  6.                 <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="leaveContent">
  7.                     <h3 class="ui-title" id="leavetext"></h3>
  8.                     <input type="button" value="Save" onclick="SaveRegister()"/>
  9.                     <input type="button" value="Leave" id="leavebutton"/>
  10.                 </div>
  11.             </div>
  12.             <!-- End Leave Warning Popup -->

Now, if the user goes 'back' from #mainregister the navigation is stopped and the popup is shown. If the user chooses save, the save occurs but the URL still changes even though we're still on #mainregister page.

So, user is on index.html/#mainregister , hits back button, popup comes up, user chooses to save, popup closes, page shown is still #mainregister but URL is now index.html but should be index.html/#mainregister .

So, now the URL and the actual page do not match; and navigation is a little broken from here.

Am I using the wrong page event? Or something else?

Also (perhaps related) I notice that if I go back after a popup (in other use cases) I get the same URL twice - e.g. <path>\index.html\#<path>\index.html (is this because I am testing from file:// or something else)?