Page not shown on multi-page page

I created multi-page (data-role = "page") html. In page1 , I have a username field, when initially fill in the username it stores in localstorage and redirects to page2 . It works great by opening the app to check if localstorage is present or not, before hiding page1 in the page beforeshow , so the problem occurs here page2 is not created . How to solve this problem. Here is a working Fiddle

* Note . In the script, enter text and submit, and then refresh the page. The html looks like this:

 <div data-role="page" id="page1">
    <div data-role="header">
      <h1>page 1 from html</h1>
      <a >Go</a>

    </div><!-- /header -->   
      <div data-role="content">
          <label>Type text to store in LocalStoreage</label>
          <input type="text" id="name" />
          <button id="sub">Submit</button>
      </div>
  </div><!-- /page -->
  <div data-role="page" id="page2">
    <div data-role="header">
      <h1>Page 2</h1>
      <a href="#page1">Back</a>
    </div><!-- /header -->  
      <div data-role="content">
          <p> Hi i am second page</p>
      </div>
  </div><!-- /page -->

      

script:

 $(document).on("pagebeforeshow","#page1",function(){
    $("#page1").hide();
    var locStorage = localStorage.getItem("lastname");
    //alert(locStorage);
    if(locStorage){
         $.mobile.changePage("#page2");
    }else{
        $("#page1").show();
    }
});

    $(document).on("click","#sub",function(){
       // alert( $("#name").val());
    localStorage.setItem("lastname", $("#name").val());
        $.mobile.changePage("#page2");
    });

      

When the comment $("#page1").hide();

on this line shows page1 , then only go to page2 I don't show page1 if local storage is available .

EDIT: Install $.mobile.autoInitialize = false;

jquery mobile before loading, even if page1 is loading for a few seconds.

+3


source to share


1 answer


Try something like this,

 windows.location.href="index.html#page2" 

      

OR

windows.location.href="#page2" 

      



instead

$.mobile.changePage("#page2");

      

So, you can try this code,

$(document).on("pagebeforeshow","#page1",function(){
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage!=null){
     windows.location.href="#page2";
}
else{
     windows.location.href="#page1";
}
});

$(document).on("click","#sub",function(){
   // alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
    windows.location.href="#page2"; 
});

      

0


source







All Articles