Ajax Optimized Toolbars

Advertisements
Previous Page
Next Page  

Description

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

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

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

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

  • This can be achieved by checking the HTTP_X_REQUESTED_WITH header as shown below:

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

Example

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

<?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="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="http://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 above code works:

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

  • Open this HTML file as http://localhost/toolbar_ajax.html and output as below gets displayed.

Previous Page
Print
Next Page