JqueryMobile – Conditional navigation to landing page

As we know jQueryMobile is a framework for creating mobile web applications and is compatible with all major desktop browsers as well as all major mobile platforms, including Android, iOS, Windows Phone, Blackberry, WebOS, Symbian.jQuery Mobile uses HTML5 & CSS3 for laying out pages with minimal scripting.

Lets Dive into JqueryMobile Implementation

jQuery Mobile make the first div with data-role=”page” as the home page, but if we want to redirect it based on certain conditions, then we need to prepend that particular div just inside body.

If we want to redirect user to a certain page on start-up based on a condition. If a user navigates directly to a page which has no access to, or without verifying “Login Credentials” Using mobileinit event, we can manipulate DOM or redirect user by changing URL window.location.href.

When jQuery Mobile’s framework is initialized, it search for first div with data-role=”page” in the body and makes it the homepage. If there is no div with that attribute, it wraps the content present in the body div into data-role=”page”. Therefore if we want to redirect user to another page then jQuery Mobile’s framework auto-initializing should be disabled autoInitializePage.

Now, we can safely redirect URL or manipulate DOM. If we need to manipulate DOM, the code which is to be manipulated needs to be wrapped in .ready() or $(function () { }), because the mobileinit event is fired before the .ready() event. Therefore , if you use any jQuery method , they won’t work , unless called in .ready() event. After doing all these changes.

Now, we can safely manipulate DOM or change URL. If we choose to manipulate DOM, any code should be wrapped in .ready() or $(function () { }), because mobileinit fires before .ready(). Hence, if you use any jQuery methods, they won’t function, unless called in .ready(). After doing changes, jQuery Mobile should be initialized manually by calling $.mobile.initializePage().

Multi Page Model:

$( document ).on( "mobileinit", function(e) {
    /* disable auto-initialize */
    $.mobile.autoInitializePage = false;
    if ( condition ) {
        $(function() { /* ready! */
            /* make login page div first one in DOM */
            $("#login").prependTo("body");
            /* initialize jQuery Mobile */
            $.mobile.initializePage();
        });
    }
});

Single Page Model:

$( document ).on( "mobileinit", function() {
    $.mobile.autoInitializePage = false;
    if ( condition ) {
        $(function() {
            /* replace current page div with another page loaded externally */
            $("body").load("login.html [data-role=page]", function(data) {
            $.mobile.initializePage();
         });
    }
});

Conclusion

This blog is going to help you redirect user to a certain page on start-up based on a condition. And you can safely redirect URL or manipulate DOM.