0

I am developing mobile app using jQuery. I have 2 pages #pg_login and #pg_account. When the page loaded by default #pg_login will gets displayed. I have a logic in place to check whether the login details are stored in the session. If login details are available (i.e. already logged in) then it has to show the page #pg_account.

I use the below code

$(document).on("pagebeforeshow","#pg_login",function(event){
  var login_flag = checkAlreadyLogin();
  if (login_flag == true){
    $.mobile.changePage('#pg_account');
  }
});

The method checkAlreadyLogin will return true if the login details are available.

Question: When the above code executes I could the see the #pg_login page for a fraction of seconds and then only #pg_account page shows.

Am I missing anything? Is there any alternate way to achieve this functionality?

Update

Based on Omar's suggestion the below code works fine.

$(document).on("pagebeforechange", function(e, data){
  var to_page = data.toPage[0].id;
  if (to_page == "pg_login") {
    if(checkAlreadyLogin()){
      $.mobile.changePage("#pg_account");
      e.preventDefault();
    }
  } 
});
Malaiselvan
  • 1,153
  • 1
  • 16
  • 42

0 Answers0