How to prevent jQuery Mobile page navigation

Written by on December 24, 2014

How to prevent jQuery Mobile page navigation

Let’s say we have a jQuery Mobile that requires a user to authorize itself and let’s say that a user had done that successfully. But here comes a problem. When working with jQuery Mobile, if Ajax is turned on, every page loaded into the DOM is a part of a single page. jQuery Mobile acts as a router that display correct content depending on our needs. If we press back button after successful authorization process, we will end up at a login page again.

This process must be done during a pagebeforechange page event (for those of you who are new to jQuery Mobile take a look here to find out more about page events). Mentioned page event will provide us with two keys called ‘toPage‘ and ‘fromPage‘. The first key will tell us destination page while the second one will tell us origin page.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Example 1

Update: My another article coveres real world example of this functionality.

The first example will show you how to prevent page transition without taking care of origin page. Both examples will be as easy as they can be, two empty pages plus button to the trigger page transition process. Leave me a comment if you want to see a more complex example, let’s say user authentication example mentioned at the beginning of this article.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>   
Javascript:
$(document).on('pagebeforechange', function(e, data){  
    var to = data.toPage;
    
    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        
        if (to === '#second') {
            alert('Can not transition the page #second!');
            e.preventDefault();
            e.stopPropagation();
            
            // remove active status on a button if a transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
        }  
    }
});
jsFiddle example

Example 2

The second example will handle the case where we need to prevent page transition from some specific page to some particular page.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>
Javascript:
$(document).on('pagebeforechange', function(e, data){  
    var to = data.toPage,
        from = data.options.fromPage;
    
    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');
        
        if (from === '#index' && to === '#second') {
            alert('Can not transition from #index to #second!');
            e.preventDefault();
            e.stopPropagation();
            
            // remove active status on a button if a transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
        }  
    }
});
jsFiddle example

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

7 thoughts on “How to prevent jQuery Mobile page navigation”

  1. Hi there,
    Thanks for your informative article,
    I have a JQM website with a login page and then the main page.
    So, when I login an then try to go to another page from the main page for the first time, if I click on back button on the browser, it redirects me to the login page,(i am using different page and not a single page with different data-role=page).
    Can you please enlighten me?

    Thanks,

  2. hi nice solution, would you please include an article with the authentication example mentioned at the beginning.

Leave a Reply to Dragan Gaić Cancel reply