jQuery Mobile – refreshing page, preventing navigation

screenshot of jQuery Mobile's documentation pageSometimes the easy thing is actually quite hard to accomplish.
Sometimes, straightforward methods do not exist for simple tasks.
This is a story for 2 such tasks – refreshing a jQuery Mobile AJAXed page and preventing navigation to another such page.



jQuery Mobile page refresh

Once you figure out that you cannot use .changePage() function directly to navigate to the same jQuery Mobile page, nor will a location.reload() work as desired, you may start looking for an alternative solution. Fortunately, you can use a special .changePage() syntax to refresh current page, and the syntax is as follows:

$.mobile.changePage(url,
 {
  allowSamePageTransition : true,
  transition : 'none',
  showLoadMsg : true,
  reloadPage : true
 }
);


Preventing page navigation

This one is a bit easier. If you ever used WordPress for blogging, (or a similar product for that matter), you may have noticed that once you start a draft and try to leave the page, you will be asked to confirm that you really want to leave and loose all your changes.

For jQuery Mobile, the situation is a little bit more complicated. You can use the onBeforeUnload event to prevent the visitor closing browser window without prior confirmation. However, when you need to prevent visitors from going back/forward or basically anywhere from the page they are currently viewing, you will need to use the pagebeforechange event in order to accomplish that. Here is how:

$(document).bind("pagebeforechange", function( event, ui ){
    event.preventDefault();
});

Now, if you use hash (#) in URL to navigate and process data according to the current hash, it can be a problem. Reason for this is that the hash is already changed when you click the back/forward button, even though the page stays in place.

Solution is to save current hash on each page change and return to it once you prevented page navigation, while possibly letting the user know as well… like this:

var
    last_hash = '',
    no_hash_change_warning = false;

$(document).bind("pageshow", function( event, ui ){
    window.last_hash = document.location.hash;
});

$(document).bind("pagebeforechange", function( event, ui ){
    event.preventDefault();
    if (!window.no_hash_change_warning) {
      window.no_hash_change_warning = true;
    } else {
      window.no_hash_change_warning = false;
    }

    document.location.hash = window.last_hash;
      if (!window.no_hash_change_warning) {
        window.alert(window.lang.cannot_leave_page);
      }
   }
});
About these ads
Categories: JavaScript | Tags: | 4 Comments

Post navigation

4 thoughts on “jQuery Mobile – refreshing page, preventing navigation

  1. Nazar

    thank you, it helps

  2. e

    i used changePage with option allowSamePageTransition : true.
    It makes a loop.
    in first time the changePage func call one time,
    in Second pressing changePage func call 2 time,
    and more…

  3. e

    i find Solution
    $.mobile.changePage(
    window.location.href,
    {
    allowSamePageTransition: true,
    transition: ‘slidefade’,
    showLoadMsg: true,
    reloadPage: false
    }
    );
    –> $.mobile.navigate(“#FillQuestionnaire”);

    Do not know why but it solved the problem

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com. The Adventure Journal Theme.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: