title: How to make Jquery Mobile Grids mapped to different screens
body: <p>I have a Jquery mobile grid - <code>ui-grid-a</code> in a screen where I have to show a .html screen in <code>ui-block-a</code> and another .html screen in <code>ui-block-b</code> . When I tried loading the screens, it only shows an empty screen with ajax loader progress bar.
  Below is my code which I tried.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div data-role="page" id="pageone"&gt;
            &lt;div data-role="header"&gt;
              &lt;h1&gt;Flexible grid&lt;/h1&gt;
            &lt;/div&gt;
  
            &lt;div data-role="main" class="ui-content"&gt;
              &lt;div class="ui-grid-a"&gt;
                &lt;div class="ui-block-a" id="grid-one"&gt;&lt;/div&gt;
                &lt;div class="ui-block-b" id="grid-two"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt; 
  
          &lt;script&gt;
              $(document).ready(function(e){
                  $('#grid-one').load('form_demo.html');
                  $('#grid-two').load('list_demo.html');
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>