title: jQuery Mobile - Loading External HTML
body: <p>I'm loading some external html into a div in a jquery mobile app. Everything works fine, however I'm trying to make it a little bit smoother. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>$(document).bind('pagebeforecreate', function (event, ui) {
      if (event.target.id == 'pageViewOrder') {
          //get the page
          $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
              $("#viewOrder_content").html(d.html).trigger("create");
              $.mobile.loading('hide');
          });
      }
  </code></pre>
  
  <p>What's happening is the page is being displayed prior to the ajax call finishing. Is there a way of halting jquery mobile from proceeding to display the page before this call is finished? At the moment it shows the page then the content pops in.</p>
  
  <p><strong>EDIT:</strong> This is loading in single pages</p>
  
  <p>Cheers,
  Ben</p>