title: jQuery Mobile Secure Pages
body: <p>I'm developing a jquery mobile site that is only available to users that are logged in.</p>
  
  <p>I have a function that checks a server for their logged in status:</p>
  
  <pre><code>function checkLogin() {
      $(function () {
          $.getJSON(root_url + 'manageUsers/checklogin/?callback=?', null,
              function (data) {
                  if (data.logged == 'false') {
                      $("#index_Container").html("&lt;h2&gt;Login Required&lt;/h2&gt;&lt;/div&gt;&lt;p&gt;We've noticed you're not logged in, please login to use this app.&lt;/p&gt;&lt;p&gt;&lt;a href='login.html' data-role='button'&gt;Click here to login&lt;/a&gt;&lt;/p&gt;").trigger('create');
                      $.mobile.changePage('login.html');
                  } else {
                      $(".logged_in").text(data.username);
                      $(".logged_in").addClass('logout');
                      $(".header_div").trigger('create');
                  }
              });
      });
  }
  </code></pre>
  
  <p>I can't seem to figure out how to implement this so everytime the index page is loaded and any other page loads this is fired prior to rendering anything else on the page. Currently, the page will load and show the HTML, then do $.mobile.changePage('login.html'):</p>
  
  <p><strong>EDIT: If anyone has any ideas on how to implement this in a better way I'd love to know, every page in the app requires the user to be logged in.</strong></p>