1

I am explaining the situation below which currently I am facing for the app I am working on.

The app consists of the Login module which stores the data to the application local storage. Now when I initiate the application it checks for the key in the local storage and accordingly call the changepage in the application.

If i clear out the local storage and restarts the application then all the transitions works perfect. But if data is already there in the application local storage and application is launched it takes me to the home screen defined.

I have a jquery listview over there. Now when i call changePage in later scenario nothing happens i.e when i land up to the home page. But in the first scenario everything works fine when i start from the login screen.

Here is the code to logout

localStorage.removeItem("userdata");
            localStorage.removeItem("default_data");
            $("#block-ui").show();
            $.mobile.loading('show');
            setTimeout(function(){
                $.mobile.loading('hide');
                $("#block-ui").hide();
                $.mobile.changePage("index.html",{allowSamePageTransition:true,reloadPage:true,changeHash:false,transition:"slide"});
                },2500);
Akhilesh Sharma
  • 1,580
  • 1
  • 17
  • 29
  • A little bit of your code would not hurt. – Gajotres Jul 17 '13 at 12:48
  • @Gajotres I have added the sample code for the logout – Akhilesh Sharma Jul 17 '13 at 13:09
  • @CodemasterGabriel Is this is a multi-page template with multiple `
    `? Why not `$.mobile.changePage($("#home"));` ?
     – Ross Jul 17 '13 at 13:40
  • @CodemasterGabriel I came across an answer I've seen before that a PhoneGap dev spoke about jQM - http://stackoverflow.com/questions/12581872/jquery-mobile-and-phonegap-best-technique Also here is a good read about the evils of jQM and PhoneGap - http://apachecordova.blogspot.com/2012/11/who-is-murdering-phonegap-its-jquery.html – Ross Jul 17 '13 at 13:57
  • @Ross I am using a multipage template for the application and code for each page is executed in a different file. – Akhilesh Sharma Jul 17 '13 at 14:06
  • @CodemasterGabriel Ok, instead of reloading everything in index.html why not `$.mobile.changePage($("#somePage"));` ? – Ross Jul 17 '13 at 14:14
  • @Ross As specified above everything is working fine if i start from index.html but in case i load home.html as per the condition change page is not working – Akhilesh Sharma Jul 17 '13 at 14:16
  • 1
    I got the solution to this. Will post the answer for the same. – Akhilesh Sharma Jul 17 '13 at 14:18
  • Also, have a look here, might work for you... http://stackoverflow.com/a/18508437/2728850 –  Aug 29 '13 at 10:31

1 Answers1

3

Finally I am able to solve the problem.

As per the understanding the jquery mobile loads the index.html as initial page and load the other html pages using ajax into the application. So the base level never changes from index.html to any other page.

Now the problem was due to the following syntax

$.mobile.changePage("home.html",{allowSamePageTransition:true,reloadPage:true,changeHash:true,transition:"slide"});

I just changed it to following:

$.mobile.changePage("home.html",{allowSamePageTransition:true,reloadPage:false,changeHash:true,transition:"slide"});

and it started to work.

Thanks anyways for the help. Moreover you can check out the following link to better understand the pitfalls and accordingly handling them:

http://rip747.wordpress.com/2012/04/19/pitfalls-with-jquery-mobile-and-how-to-over-come-them/

Akhilesh Sharma
  • 1,580
  • 1
  • 17
  • 29