Asynchronous Page Loading Plugin In jQuery - AjaxPageParser

AjaxPageParser is a jQuery plugin to ajaxify your website that asynchronously loads web pages (or a part of your web page) via AJAX just like a native mobile app.

The plugin displays a loading spinner while loading content from external pages and updates the title & page URL (OPTIONAL) when the page is completely loaded into the current page.

Also provides an error callback which will be fired when the page fails to load.

See also:

• Load External Files Into Webpage Using AJAX - jQuery includeHTML.js
• jQuery Plugin For Ajaxifying Your Website - Ajaxify

How to use it:

1. Download & unzip the plugin and include the latest version of the AjaxPageParser on your web pages.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.pageparser.min.js"></script>

2. Create a page loading spinner on the webpages.

<div class="loader">
  <span><img src="img/loader.gif" alt="" /></span>
</div>

3. Create a navigation menu pointing to the pages within your website.

<div class="menu">
  <a href="/demo/AjaxPageParser/index.html" class="active">Index page</a>
  <a href="/demo/AjaxPageParser/pages/second.html">Second page</a>
  <a href="/demo/AjaxPageParser/pages/third.html">Third page</a>
</div>

4. Initialize the plugin on the menu items and specify the the container in which the data will display.

<div id="container">
  ...
</div>

$(".menu a").pageParser({
  container: $('#container')
});

5. More configuration options.

$(".menu a").pageParser({

  // if false, the plugin doesn't update the URL to match the loaded page
  dynamicUrl: true, 

  // the active element from which the page loaded from on initial load
  initialElement: null, 

  // if empty it loads the whole page
  parseElement: null, 

  // sets the title of the page
  setTitle: true, 

  // custom trigger event
  trigger: 'click',

  // default attribute that holds the URL
  urlAttribute: 'href',

  // loading delay
  loadDelay: null
  
});

6. Event handlers.

$(".menu a").pageParser({

  before: function(){
    // fired before loading
    // 'this' returns the clicked button
  }, 

  // 
  finished: function(){
    // fired after loading
    // 'this' returns the clicked button
  },

  error: function(){
    // fired on error
    // returns the xhr status.
  }, 

});

---

This awesome jQuery plugin is developed by terwanerik. For more Advanced Usages, please check the demo page or visit the official website.