Question

I’m using jQuery mobile with PhoneGap, and would like to show a login page the first time the app is used, and show the index page on subsequent loads.

My current solution is to use the following on deviceready

if(!localStorage.registered){ 
   $.mobile.changePage( "#login", { transition: "none"} ); 
}

However, my issue with this is that you still see the page transition. I would like the login page to be the first page that is visible.

Any advice? Thanks!

Answer 1

This Q is a few months old, it remains unanswered, I don’t have any experience with phone gap but I do jQM, so I figured this may help.

I current employ a solution to this on my app by delaying auto initialisation of jQM.
This is an example of how you could based loosely on how my application does it.

(function() {

  #stop jQM from auto initialising
  $(document).on("mobileinit",function() {
    $.mobile.autoInitializePage = false;
  });

  var my_app = new MyApp();

  # custom afterinit event is triggered on the app instance 
  $(my_app).on('afterinit',function() {
    var initial = 'login';
    if(localStorage.registered) {
      initial = 'home';
    }
    # set the page hash to our start page
    window.location.hash = initial;

    #initialise jQM
    $.mobile.initializePage();
  });

})();

Make sure you secure the thing that decides if login is allowed, in my application I have a data structure that is required by the app ajax in to MyApp.appdata it will only be there if login was actually successful.