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

5 thoughts on “Redirect on Start-up

  1. Omar,

    This looked amazingly promising but alas, it really doesn’t work as a solution. When you specify index.html as your startup document, you’ll load all your .js file and you’ll have your #homePage and probably a panel menu or another frequently used page or two. When you implement your method, you can indeed detect if a user has created an account and/or is logged in and redirect them to a login or on-boarding process. What you can’t do is return from that login page. For instance, if your login.html page and login.js code has a
    $.mobile.changePage(“#homePage”);
    —- or —-
    $(‘:mobile-pagecontainer’).pagecontainer(‘change’, $(‘#homePage’), {reverse: true});
    The app will crash and leave the user with a blank screen because .load() replaces everything within the tag with login.html. If the coder has any tags at the bottom (as many do), those get replaced too.

  2. Excellent explanation.

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

  3. 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?

  4. 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 */
       }
    });
    
  5. 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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s