Ajax Optimized Toolbars

Description

Ajax optimized persistant toolbars pages are optimized on the server side to check whether the request is from an Ajax.

If the request is from Ajax only the actual page div is sent instead of the entire page.

When you navigate to any navbar page at the bottom, you can inspect the return data which contains no head, toolbars, html tag, or body tag.

However, on refreshing the page you will see all these things present.

This can be achieved by checking the HTTP_X_REQUESTED_WITH header using the following if case.

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {

Example

Following example demonstrates the use of ajax optimized toolbars in jQuery Mobile.

Live Demo 
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
   <!DOCTYPE html>
   <html>
      <head>
         <title>Ajax optimized persistent toolbars</title>
         <meta name = "viewport" content = "width = device-width, initial-scale = 1">
         <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
         <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
         <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
         
         <script>
            $(function() {
               $("[data-role = 'navbar']").navbar();
               $("[data-role = 'header'], [data-role = 'footer']").toolbar();
            });
         </script>
      </head>
      
      <body>
         <div data-role = "header" data-position = "fixed" data-theme = "a">
            <a href = "#" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon 
               ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
            <h1>Fixed external header</h1>
         </div>
      <?php } ?>
   
      <div data-role = "page" data-title = "Details" class = "jqm-demos">
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h2>jQuery Mobile</h2>
               <p>The jQuery Mobile is a user interface framework which is built on jQuery 
               core and used for developing responsive websites or applications that are 
               accessible on mobile, tablet and desktop devices. It uses features of both 
               jQuery and jQueryUI to provide API features for mobile web 
               applications.</p>
               
               <ul class = "list">
                  <li><p>The jQuery Mobile creates web applications in such a way that it 
                     will work the same way on the mobile, tablet and desktop 
                     devices.</p></li>
                  
                  <li><p>The jQuery Mobile is compatible with other frameworks such as 
                  <i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
                  
                  <li><p>The jQuery Mobile provides set of touch friendly form inputs and 
                  UI widgets.</p></li>
                  
                  <li><p>The progressive enhancement brings you functionality to all 
                  mobile, tablet and desktop platforms and adds efficient page loads 
                  and wider device support.</p></li>
            </ul>
         </div>
      </div>
   
      <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || 
         strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
         <div data-role = "footer" data-position = "fixed" data-theme = "a">
            <div data-role = "navbar">
               <ul>
                  <li><a href = "/jquery_mobile/src/toolbar_ajax.html" 
                     data-prefetch = "true" data-transition = "flip">Details</a></li>
                     
                  <li><a href = "/jquery_mobile/src/toolbar_friends.html" 
                     data-prefetch = "true" data-transition = "fade">Friends</a></li>
                     
                  <li><a href = "/jquery_mobile/src/toolbar_messages.html" 
                     data-prefetch = "true" data-transition = "slide">Messages</a></li>
               </ul>
            </div>
         </div>
      </body>
   </html>
<?php } ?>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as toolbar_ajax.html file in your server root folder.

  • Open this HTML file as http://localhost/toolbar_ajax.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements