0

In my jQuery mobile app , I have used data-prefetch in order to prefetch Page1 , to increase the performance since each page take time to open and be shown to the user after clicking the link , the problem is that when I click on Page1 link once the app is lunched the pageinit/ pagecreate events for Page1 didn't executed , in this event I return data from the database to be displayed in a popup listview , but when I back to the home Page then click Page1 link a gain the Pageinit event executed and the data returned .

Why the Pageinit/ pagecreate events didn't work when prefetching a page ? How can I solve this problem ? since its very important to return the data in the Pagecreate or Pageinit event

another problem I have faced is that when I back from Page1 to the home Page the Home Page links become not working I click the Page1 link but Page1 didn't open, even if i click on the link many times it didn't open Page1 .. How can i solve this problem also ?? Please help me

Home Page 

<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
     <h1>Header - Home</h1>

</div>
<div data-role="content"></div>
<a href="Page1.html" data-transition="none"  class="ui-btn"  data-role="button" data-prefetch="true" >Page1</a>
 <a href="Page2.html" data-transition="none"  class="ui-btn"  data-role="button" data-prefetch="true" >Page2</a>

<div data-role="footer" data-position="fixed">
     <h1>Footer</h1>

     </div>
 </div>

Page 1

<div data-role="page" id="Page1">
     <div data-role="header" data-position="fixed">
       <h1>Header - Page 1</h1>

      </div>
      <div data-role="content">

       <a href="MyPOPUP" data-rel="popup" class="ui-btn  ui-corner-all" data-   inline="true">Show Popup</a>

       </div>
       <div data-role="popup" id="MyPOPUP" data-position-to="window" data-  corners="false" data- overlay-theme="a" data-dismissible="false">
       <div data-role="header" data-theme="a">

           <div style="text-align:center;float:center;padding-top:11px;">
           <font size="6px" color="white">Employees</font>

           </div>
        </div>
       <div id="scrollContent" data-role="content">
      <ul data-role="listview" id="EmpList" style="margin: 0 !important;">

      </ul>
     </div>
   </div>
</div>

Page1.js

  document.addEventListener('deviceready', onDeviceReady, false);


  function   onDeviceReady() 
  {

       $('#Page1').on('pageinit',function(event){


           db.transaction(getAllEmployees, transactionError); 

       });

   }

  function getAllEmployees(tx)
  {
      tx.executeSql('SELECT EmpName,Salary,Gender,Country  FROM  Employee',           [],getEmpSuccess,transactionError);

  }

 function  getEmpSuccess(tx,result)
 {    

     if (result.rows.length)
     {


         for(var i=0;i< result.rows.length; i++)
         {     
            var row = result.rows.item(i);
            $('#EmpList').append('<li><a href="#">' +'<font class="line1">' + '         '+row['EmpName']+ '</font>' +'<font size="6px" class="line2" > '+ row['Gender']  +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font  size="6px" class="line4"> '+ row['Salary']+'</font><BR> '+'</a><a href="#" >Delete</a></li>' );

                                                                                                                                                                                                                    }
 } 
 $('#EmpList').listview('refresh');
}
user
  • 621
  • 15
  • 46
  • I don't think the problem in prefetching, try `$(document).on("pageinit", "#pageid", function ()`. – Omar Feb 10 '14 at 21:18
  • @OmarThanks I have tried it, but the problem still the data not returned "the popup is empty " – user Feb 10 '14 at 21:27
  • @OmarAt the first time when i lunch the app and click Page1 link it didn't enter the pageinit event handling at all since i have put an alert to test that and the alert didn't appear , but when i back to homePage then again click Page1 link the pageinit executed and the alert appears – user Feb 10 '14 at 21:38
  • But I need to click the link 3 times to open the Page1 , Please is there any other solution for this problem? can you help me more please ? – user Feb 10 '14 at 21:39
  • Instead of prefetch, on first page's create, load page1.html `$.mobile.pageContainer.pagecontainer("load", "page1.html")` – Omar Feb 10 '14 at 22:03
  • @OmarThanks I have tried it, the pageinit function is executed and the data returned , but when i back to the homePage the links are become not working i need to click more than one on the link to open the Page, and it didn't open Page1 directly as when using data-prefetch="true" How can we solve this issue? – user Feb 10 '14 at 22:24
  • because when you leave page.html, its removed from DOM. add `data-dom-cache="true"` attribute to page.html page div. – Omar Feb 10 '14 at 22:26
  • @Omardata-dom-cache="true" I have tried it before it makes problems in the app : screen flicker and a white page become appearing when navigating between pages – user Feb 10 '14 at 22:37
  • @OmarBut why the link in the Home Page becomes not working from the first click, I need to click it 3 times to open Page1 and some times it not open it at all ? can we solve this Problem ?? – user Feb 10 '14 at 22:39
  • @OmarCan you help me in solving the problem of links after back Please ??? – user Feb 10 '14 at 23:00
  • try this `$(document).on("pagecreate", function () { if($("#page1").length === 0) { $.mobile.pageContainer.pagecontainer("load", "page1.html"); } });` – Omar Feb 10 '14 at 23:03
  • @OmarThis solved the link issue , but the Page1 is loaded and the pageinit is executed when i open every other page in the app ( page2, page3) which makes them take too time to open – user Feb 10 '14 at 23:23

0 Answers0