title: jQuerymobile Navigation Bar with Multiple Pages in single index.html
body: <p>I am trying to create a jQuerymobile app with a Nav Bar with Multiple Pages in single index.html. I am using the template <a href="http://demos.jquerymobile.com/1.4.5/pages/" rel="nofollow noreferrer">Multi-page template structure</a></p>
  
  <p>Unfortunately, I cannot get the nav bar to show different pages. Here is my code:</p>
  
  <p>I did also use a script 'pageLoader.js' to force loading the pages. But that does not work either. Here is my pageLoader.js:</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;My Page&lt;/title&gt;
          &lt;!--https://jquerymobile.com/download/--&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;!--POST page 1--&gt;
  
          &lt;div data-role="page" id="postPage"&gt;
              &lt;div data-role="header"&gt;
                  &lt;h1&gt;I'm a header&lt;/h1&gt;
                      &lt;div data-role="navbar"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#postPage"&gt;POST&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#getPage"&gt;GET&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#putPage"&gt;PUT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#deletePage"&gt;DELETE&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                          &lt;/div&gt;&lt;!-- /navbar --&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  
              &lt;div role="main" class="ui-content"&gt;
  
  
                  &lt;label for="key"&gt;key:&lt;/label&gt;
                   &lt;input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true"&gt;
  
                  &lt;label for="value"&gt;value:&lt;/label&gt;
                   &lt;input type="text" name="value" id="value" placeholder="enter your value" value="" data-clear-btn="true"&gt;
  
                  &lt;button onclick="saveValue()"&gt; Store Key&lt;/button&gt;
                  &lt;p id="status"&gt;Status: No Activity&lt;/p&gt;
  
              &lt;/div&gt;&lt;!-- /content --&gt;
  
              &lt;div data-role="footer"&gt;
                  &lt;h4&gt;My Footer&lt;/h4&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  
              &lt;!--get Page 2--&gt;
  
              &lt;div data-role="page" id ='getPage'&gt;
  
                  &lt;div data-role="header"&gt;
                      &lt;h1&gt;I'm a header&lt;/h1&gt;
                          &lt;div data-role="navbar"&gt;
                                  &lt;ul&gt;
                                          &lt;li&gt;&lt;a href="#postPage"&gt;POST&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#getPage"&gt;GET&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#putPage"&gt;PUT&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#deletePage"&gt;DELETE&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;&lt;!-- /navbar --&gt;
                  &lt;/div&gt;&lt;!-- /header --&gt;
  
                  &lt;div role="main" class="ui-content"&gt;
  
  
                      &lt;label for="key"&gt;key:&lt;/label&gt;
                       &lt;input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true"&gt;
                      &lt;button onclick ="getValue()"&gt; Get Value&lt;/button&gt;
                      &lt;p id="status"&gt;Status: No Activity&lt;/p&gt;
  
                  &lt;/div&gt;&lt;!-- /content --&gt;
  
                  &lt;div data-role="footer"&gt;
                      &lt;h4&gt;My Footer&lt;/h4&gt;
                  &lt;/div&gt;&lt;!-- /footer --&gt;
  
  
              &lt;/div&gt;&lt;!-- /page --&gt;
              &lt;script src="scripts/client.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="scripts/pageLoader.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried to use a script to enforce change of pages. I used the pageLoader.js script with following content:</p>
  
  <pre><code>$(document).on("pageshow", function(){
      if($('.ui-page-active').attr('id') === 'postPage'){
          $.mobile.changePage("#postPage");
      } else if ($('.ui-page-active').attr('id') === 'getPage'){
           $.mobile.changePage("#getPage");
      }
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>