title: jquery mobile multipage in separate html files
body: <p>I have a Jquery Mobile multipage  with different pages
          
          </p>
  
  <pre><code>      &lt;title&gt;TEST&lt;/title&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  
  
        &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;  
        &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  
  
        &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
        &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/&gt;
  
  
        &lt;script type="text/javascript" src="lib/jquery.tmpl.min.js"&gt;&lt;/script&gt;
  
        &lt;script&gt;
  
  
            $(document).ready(function(){
                  $(document).on("pagebeforeshow", "#mainPage", function(e, data) {
                      showPageDossiers(filename, selector);
                  });
              //do some initialization stufff
            )};
  
  
              function showPageDossiers(filename, selector) {
                  // incldue template
                  $.get(filename, function(template) {
                      $(selector).html(template);
                      $(selector).trigger("create");
                  });
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
        &lt;div id="mainPage" data-role="page" data-title="Main"&gt;
  
                     &lt;!--    in comment, this code in external HTML file 
                      &lt;div data-role="header"&gt;&lt;h2&gt;Main Page&lt;/h2&gt;&lt;/div&gt;            
                      &lt;div class="ui-content" data-role="content"  role="main"&gt;
  
                          &lt;div id="divListeDossiers"&gt;
                              &lt;ul id="listeDossiers" data-role="listview" data-inset="true"&gt;
                                  &lt;li&gt;&lt;a href="#page2"&gt;GOTO Page2 &lt;/a&gt; &lt;/li&gt;              
                              &lt;/ul&gt;
                           &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div data-role="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;
                    --&gt;
        &lt;/div&gt;
  
        &lt;div id="page2" data-role="page" data-title="page2"&gt;
                  &lt;div data-role="header"&gt;&lt;h2&gt;Page 2&lt;/h2&gt;&lt;/div&gt;           
                  &lt;div class="ui-content" data-role="content"  role="main"&gt;
  
                      &lt;div id="divList"&gt;
                          &lt;ul id="listeDossiers" data-role="listview" data-inset="true"&gt;
                              &lt;li&gt;&lt;a href="#page3"&gt;GOTO page3&lt;/a&gt; &lt;/li&gt;               
                          &lt;/ul&gt;
                       &lt;/div&gt;
                  &lt;/div&gt; 
                  &lt;div data-role="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="page3" data-role="page" data-title="page23"&gt;
                  &lt;div data-role="header"&gt;&lt;h2&gt;Page 3&lt;/h2&gt;&lt;/div&gt;           
                  &lt;div class="ui-content" data-role="content"  role="main"&gt;
  
                      &lt;div id="divList"&gt;
                          &lt;ul id="listeDossiers" data-role="listview" data-inset="true"&gt;
                              &lt;li&gt;&lt;a href="#mainPage"&gt;GOTO mainPage&lt;/a&gt; &lt;/li&gt;             
                          &lt;/ul&gt;
                       &lt;/div&gt;
                  &lt;/div&gt; 
                  &lt;div data-role="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;
        &lt;/div&gt;  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I would like to put the code between the </p>
  
  <pre><code>&lt;div id="pageXX"&gt; .... &lt;/div&gt;
  </code></pre>
  
  <p>in separate JSP files since I may have more pages.  Having all in one main 
  JSP file make it hard to manage and read.
  For example, my separate content for the mainPage div, will look like </p>
  
  <pre><code>        &lt;div data-role="header"&gt;&lt;h2&gt;Main Page&lt;/h2&gt;&lt;/div&gt;            
          &lt;div class="ui-content" data-role="content"  role="main"&gt;
  
              &lt;div id="divListeDossiers"&gt;
                  &lt;ul id="listeDossiers" data-role="listview" data-inset="true"&gt;
                      &lt;li&gt;&lt;a href="#page2"&gt;GOTO Page 2&lt;/a&gt; &lt;/li&gt;              
                  &lt;/ul&gt;
  
  
  
               &lt;/div&gt;
          &lt;/div&gt; 
          &lt;div data-role="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.</p>
  
  <p>I googled but the only things I found is linking to external HTML file.</p>
  
  <p>Anyone known how to break the main file into separate files ?</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE :</strong> with a complete code that I had now </p>