title: How to decide which page to load first on jquery mobile?
body: <p>i'm building a mobile app using jquery mobile and phonegap (Apache Cordova), the problem is that first i need to make a DB query before i decide which page i want to load first, if it's the "login" page or the "main page".</p>
  
  <p>Based on the phonegap documentation i need to bind the "deviceready" event to know when the device is ready and then make the DB queries.</p>
  
  <pre><code>document.addEventListener("deviceready", onDeviceReady, false);
  </code></pre>
  
  <p>The function called "onDeviceReady" creates the DB if it's not created and then makes a query to a table named "users" and if there is one or more users i wan't to show a page named "main.html" otherwise a page named "login.html".</p>
  
  <pre><code>function onDeviceReady() {
      var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
      db.transaction(populateDB, errorCB, successCB);
  }
  </code></pre>
  
  <p>Basically, the problem is that while this functions are executed the first page is loaded because the following code is executed before the "onDeviceReady" function is called:</p>
  
  <pre><code>$(document).bind( "mobileinit", function(){             
      $.mobile.listview.prototype.options.filterPlaceholder = "Buscar...";
      //-&gt; patch for phonegap
      $.mobile.allowCrossDomainPages = true;
      $.mobile.page.prototype.options.backBtnText = "atr&amp;aacute;s";
  });
  $( document ).bind( "pagebeforeload", function( event, data ){
      // here i think i would say to phone gap not to load any page until i make the db queries
      //i think i can't make the DB queries here because the "pagebeforeload" is launched before the "deviceready" function
  });
  </code></pre>
  
  <p>If the code of the first page according to the DOM in ASC order this page is loaded:</p>
  
  <pre><code>&lt;div data-role="page" id="page-init"&gt;
          &lt;div data-role="header" data-theme="c" data-position="fixed"&gt;
              &lt;h1&gt;Init page&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>If i change the page to "main.html" using <code>$.mobile.changePage("main.html");</code> once i checked if there is one or more user records on the "users" table, the "page-init" page is loaded first and then the "main.html" and i don't want this because the user can se a kind of flash.
  I just want decided once i checked to the "users" table which page is going to be displayed first.</p>