title: jQuery Mobile + PHP - multiple pages architecture
body: <p>I'm trying to figure out which is the best architecture for an application created with jQuery Mobile and PHP that uses multiple pages generated with PHP.</p>
  
  <p>I have created two almost similar pages (as an example). Each page has one button (link) that redirects the user to the other page.</p>
  
  <p>That's what the first page looks like:</p>
  
  <p><strong>p1.php</strong></p>
  
  <pre><code>&lt;?php
      session_start();
      if(!isset($_SESSION['p1'])) $_SESSION['p1']=0;
      $_SESSION['p1']=$_SESSION['p1']+1;
  ?&gt;
  &lt;!doctype html&gt; 
  &lt;html&gt; 
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://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="page_1" data-dom-cache="false"&gt;
      &lt;div role="main" class="ui-content" id="maincontainer_1"&gt;
          &lt;h1&gt;Page 1 counter: &lt;?echo $_SESSION['p1'];?&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;a href="p2.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r" &gt;Go to page 2&lt;/a&gt;
          &lt;br&gt;
          &lt;a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" &gt;Back&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The page is simple and displays the number of visits the user makes on this page.</p>
  
  <p>The second page is the same as the first, only counting the user's visits to it. That's how it looks:</p>
  
  <p><strong>p2.php</strong></p>
  
  <pre><code>&lt;?php
      session_start();
      if(!isset($_SESSION['p2'])) $_SESSION['p2']=0;
      $_SESSION['p2']=$_SESSION['p2']+1;
  ?&gt;
  &lt;!doctype html&gt; 
  &lt;html&gt; 
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://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="page_2" data-dom-cache="false"&gt;
      &lt;div role="main" class="ui-content" id="maincontainer_2"&gt;
          &lt;h1&gt;Page 2 counter: &lt;?echo $_SESSION['p2'];?&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;a href="p1.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" &gt;Go to page 1&lt;/a&gt;
          &lt;br&gt;
          &lt;a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" &gt;Back&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>The problem</strong></p>
  
  <p>If the user opens the first page (p1.php) and then he browsing between the two pages, he will see that only on the second (p2.php) increase the number of visits were made made. The first page (p1.php) will always display the same number of visits, even if the two pages should actually display approximately the same number of visits.</p>
  
  <p>This is because of jQuery Mobile. The first page is loaded into DOM and never removed. All other pages loaded by jQuery Mobile (in this case p2.php) are loaded with ajax and doing so the PHP part is executed. But the first page (in this example p1.php) is never loaded again, so the PHP part is executed only once. That's why the number of visits on the first page is not changed.</p>
  
  <blockquote>
    <p>Note that the contents of the first page isn't removed from the DOM,
    only pages loaded in via AJAX. Pages inside a multi-page template
    aren't affected by this feature at all - jQuery Mobile only removes
    pages loaded via AJAX.</p>
  </blockquote>
  
  <p>In the same way, if user hit F5 on second page, then jQuery Mobile loads this page (p2.php) as main page. In this case it will increase the number of visits on first page (p1.php) and the number of visits made on p2.php will not change anymore.</p>
  
  <p><strong>Request</strong>  I need a way to modify the content of a page using PHP without the fear that user will hit F5 or refresh any page and thus this page will become the main jQuery Mobile page and this way it will never be effectively reloaded again.</p>
  
  <p>Note that all pages are loaded by jQuery Mobile by using ajax. jQuery Mobile will strip any page by the header and other stuff and will only load the first DIV marked with <code>date-roll = "page"</code>. Only the first page is loaded normally (and only once). So if you're wondering why pages have the same header (even if it's no longer loaded), that's because if the user refresh the page, it's displayed correctly (as jQuery Mobile main page).</p>
  
  <p><strong>Current approach</strong> At this time I use a modified script that is loaded on each page. This script removes any page from the DOM to force it to be reloaded when the user visits it again. THis is the script:</p>
  
  <pre><code>// delete old pages
      $(document).on("pagecontainerchange.fixcache", $.mobile.pageContainer, function (event, ui) {
          if ($.mobile.firstPage.is('[data-dom-cache="true"]') || $.mobile.page.prototype.options.domCache &amp;&amp; $.mobile.firstPage.is(':not([data-dom-cache="false"])')) {
              $(document).off('pagecontainerchange.fixcache');
          } else if (ui.prevPage !== undefined) {
              if (!($(ui.toPage).hasClass('ui-dialog') || $(ui.prevPage).hasClass('ui-dialog')) &amp;&amp; ui.prevPage.prop("id")!==ui.toPage.prop("id")) {
                      $.mobile.firstPage.remove();
                      $(document).off('pagecontainerchange.fixcache');
              }
          }
      });
  </code></pre>
  
  <p>In this way the example above works correctly.</p>
  
  <p><strong>Doubts</strong>. Is this the right way to create a multi-page application using jQuery Mobile and PHP?</p>
  
  <p>Should I only use only AJAX requests as below? This will not (unnecessarily) increase the complexity of the code? (request - process request - json answer - process answer)</p>
  
  <pre><code>$.ajax({
    type: "POST",
    url: "request.php",
    data: {...} ,
    success: function(data) {
    ...
  }
  });
  </code></pre>
  
  <p>I think so because there are many distinct requests on a page. A page generated by PHP usually solve through a single access all necessary data. Using multiple AJAX requests will not load the server too much?</p>
  
  <p>Should I use a single AJAX request that fills the entire page?</p>
  
  <p>Really do not know...</p>