Redirect on Start-up


Assuming that you 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, you can manipulate DOM or redirect user by changing URL window.location.href.

When jQuery Mobile’s framework is initialized, it looks for first div with data-role="page" in body and makes it the homepage. If there is no div with that attribute, it wraps body‘s content in data-role="page" div. Therefore, before user is redirected, jQuery Mobile’s framework auto-initializing should be disabled autoInitializePage.

Now, you can safely manipulate DOM or change URL. If you 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().

One last note, mobileinit‘s code should be placed in head after jQuery and before jQuery Mobile libraries.

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();
    });
  }
});

Demo


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();
      });
    });
  }
});

Demo

Advertisements

4 thoughts on “Redirect on Start-up

  1. Excellent explanation.

    Let’s say i redirect to login.html and the user logs in. How do I remove login page from history?

  2. This is what I’m looking for, I want to redirect on start up based on condition, if the user saved their email in local storage, I want to redirect to different page, How would i go about doing something like this?

  3. Salam Mohammed,

    To redirect user before showing current page, use pagecontainerbeforechange.

    Unfortunately, on first run, that event doesn’t return a string unlike in later stages. So using mobileinit instead is the solution.

    If the user navigates to homepage and then to another page, you can use pagecontainerbeforechange to alter navigation, as follows.

    $(document).on("pagecontainerbeforechange", function (e, data) {
       if ( typeof data.toPage == "string" && user-is-not-logged ) {
          data.toPage == "register.html" /* or #register */
       }
    });
    
  4. Hi Omar,

    Thanks for the above example , it is really helpful.

    But I tried it and never worked , maybe I am using it incorrectly, all I am trying to do , is to check if user is logged in , if false then redirect to login page. I managed to do so but the problem is after redirected to the register page , simply it is redirecting back to the index.html by itself with no action.

    $(document).on("pagebeforecreate","#homepage",function(){
       if (user not logged in) {
         $(":mobile-pagecontainer").pagecontainer("changed","register.html");
       }
    });
    

Drop me a line or two ;)

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