title: Adding dynamic content to the page before showing it in jQuery mobile
body: <p>In my jQuery mobile, Phonegap  app I have a page in which there is a list view , this list content is added dynamically , the problem is that when i navigate to this page its firstly shown empty and after seconds the List view added to the page and shown  , I have used pagebeforeshow  event to add the list view content before showing the page but it didn't work for me " the list view is shown after showing the page " and the user will notice  and see the content while its added to the page. How can i solve this problem so the list content added before showing the page ? please help me ..</p>
  
  <p>Thanks in advance .</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div data-role="page" id="EmployeesListPage"&gt;
  
  &lt;div  data-role="header"  data-position="fixed"  data-tap-toggle="false" data- fullscreen="false"   data-theme="b"&gt;
  &lt;h3&gt; Employees&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div data-role="content"&gt;
  
  &lt;ul data-role="listview"   id="EmpList"   data-inset="true"  data-filter="true" data-  filter-placeholder="Search " data-split-icon="delete"  style="margin-top: 30px;" &gt; 
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Java Script</p>
  
  <pre><code>document.addEventListener('deviceready', onDeviceReady, false);
  
  function onDeviceReady()
  {
      loading('show');
  
      $('#EmployeesListPage').on( 'pagecreate',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&lt; result.rows.length; i++)
     {     
         var row = result.rows.item(i);
         $('#EmpList').append('&lt;li&gt;&lt;a href="#"&gt;' +'&lt;font class="line1"&gt;' + '  '+row['EmpName'] + '&lt;/font&gt;&lt;BR&gt;&lt;BR&gt;' +'&lt;font     size="6px" class="line2" &gt; '+ row['Gender']  +'&lt;/font&gt;'+'&lt;font size="6px" class="line3"&gt; ' +row['Country']+' &lt;/font&gt;'+'&lt;font  size="6px"   class="line4"&gt; '+ row['Salary']+'&lt;/font&gt;&lt;BR&gt; '+'&lt;/a&gt;&lt;a href="#" &gt;Delete&lt;/a&gt;&lt;/li&gt;' );
  
  
                                                                                                                                                                                                      }
  
  
        $('#EmpList').listview('refresh');
         loading('hide');
        }
     }
  
  
    function transactionError(tx, error)
   {  
        alert("Database Error: " + error);
   }
  
  
   function loading(SH) 
   {
       setTimeout(function(){
  
     if( SH == "show")
     {
          $.mobile.loading( "show", {
             text:"Loading...",
             textVisible: true,
             theme: "b",
             textonly: false
          });
      }
      else if( SH == "hide")
      {
          $.mobile.loading("hide"); 
  
      }
  
        }, 1000); 
     }
  </code></pre>