jQuery | Ajaxify Plugin


Author: Seon-Wook Park
Source: https://github.com/swook/jquery-ajaxify-plugin
License: MIT License <http://www.opensource.org/licenses/mit-license.php>



Description

Ajaxify hijacks links which point towards another page on your website and loads the target link's content without reloading the page.

With Ajaxify included in your website, users will be able to browse without experiencing flickers or blank screens. Links are loaded in the background and shown when the plugin is ready to show you the page.

The plugin also keeps track of what has been clicked, and gives your users seamless back/forward navigation skills.

Previously, features similar to one which this plugin provides had to be coded into every link and would often be difficult for the JavaScript novice. It is now easier with one line of configuration code.

To summarise, here are the features of Ajaxify:
  • Reloadless browsing within a website.
  • HTML5 History support.
  • Anchor link support (#links).
  • Support for ctrl-click and middle click on links.



Installation

Insert the following line into your webpage:
<script src="http://files.swook.net/js/jquery.ajaxify.min.js" type="text/javascript"/>
<script type="text/javascript">
    $.Ajaxify.all();
</script>



Configuration

You can configure which elements of the page should change when a user clicks on an internal link.
Do it in the following manner using jQuery selectors.
$.Ajaxify.container = '.content';

You can also supply an array of selectors in the following way:
$.Ajaxify.container = ['.content', '.footer'];
To choose the right elements, view carefully which bits of your site stays consistent and select those elements.

Note: Due to jQuery/JavaScript limitations, some selectors do not work. For example, you cannot use 'body'.

Make sure to define the containers before running $.Ajaxify.all().




Some of my links shouldn't be loaded using Ajaxify

If you want some of your links to bypass Ajaxify (ie. When it doesn't contain the same container elements), declare your links in the following way:
<a class="noajax" href="/path/to/page.html">My Page</a>


Can I run JavaScript when those links are ninja-loaded?

To run JavaScript code when the page changes (when someone clicks on an internal link), run your code in the following way:
$.Ajaxify.pageChange(function() {
    alert('New Page!');
});


I'd like to load a page via JavaScript

You may need to load a page via JavaScript for use in simulated clicks of buttons for example. To do so, use the following function:
$.Ajaxify.loadURL('/path/to/page.html');




Possible Problems

In the following scenarios, this plugin will not work:
  • Google AdSense. (AdSense does not support AJAX)
  • Inline JavaScript is not executed. (Solution: Take a look at $.Ajaxify.pageChange)