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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • anas

    Good article .
    Thanks

  • Omar

    Well said and explained, keep it up!

  • 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,

  • Sid

    Hello!
    I am facing some weird problems using jqm1.4 navigation.
    http://stackoverflow.com/questions/22588061/navigation-problems-in-jquery1-4-1
    Please look at this and try to help.

    My pages automatically navigate according to its own wish. Cant understand what is going on.

    Finally how much difference does it make if I remove ajax navigation for android mobile apps built with phonegap.

  • david

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