Ajaxify Page

A jQuery plugin which allows you to make your page into an Ajax page with a single function call. It has two methods of operation. 1. Static HTML. If your static pages are HTML only, just pass an array of jQuery selectors to the replacementElements parameter. jQuery will find the content of each of these selectors in the target page of any link and put it into the matching selector of your current page. 2. JSON. Pass the linkUrl (and formUrl for forms) parameter to your AJAX serving URL. jQuery will pass the target and referrer to this URL, and put each bit of the content into your page. The JSON API looks like this: [ { selector: "#my-id", content: "New content", writeMethod: "append" }, { selector: "#my-id2", content: "More new content", writeMethod: "overwrite" } ]

by nathan

HTML

<div id="test-element">Test content</div>
<div>When you click the link, the text above should have "New content" appended to it. <a href="/test">Clicky</a></div>

<div id="form-container">
    <form method="post" action="/">
        <input type="text" name="test" />
        <input type="submit" />
    </form>
</div>

<div><a href="/" class="no-ajax">This link</a> works as normal because it has the <code>no-ajax</code> class. <a href="http://www.google.com/">This link</a> works as normal too because it's external.</div>

CSS

div {
    margin-bottom: 1em;
}

JavaScript

jQuery(function($) {
    var linkJson = '[ {'
        + '"selector":"#test-element", '
        + '"content":"<br />New content", '
        + '"writeMethod":"append" '
        + '} ]';
    var formJson = '[ { "selector":"#form-container", "content":"Form received" } ]';
    $.ajaxifyPage({
        linkUrl: '/echo/json/',
        formUrl: '/echo/json/',
        linkData: {
            json: linkJson
        },
        formData: {
            json: formJson
        },
        linkMethod: 'post',
        formMethod: 'post'
    });
});

(function($) {
    $.extend({
        ajaxifyPage: function(options) {
            options = $.extend({
                linkUrl              : false,
                formUrl              : false,
                linkData             : {},
                formData             : {},
                linkMethod           : 'get',
                formMethod           : false,
                noAjaxClass          : 'no-ajax',
                externalLinkSelector : '[href^="http://"],[href^="https://"]',
                externalFormSelector : '.external', // doesn't work if you try to use [action^=http], I think the browser makes all form urls absolute on load
                replacementElements  : false
            }, options);

            var loadPage = function(target, method, sendData) {
                window.location.hash = target;
                if (options.linkUrl || !options.replacementElements) {
                    var ajaxType = 'json';
                }
                else {
                    var ajaxType = 'html';
                }
                $.ajax({
                    url: target,
                    type: method,
                    dataType: ajaxType,
                    data: sendData,
                    success: function(result) {
                        // newElements collects together everything that gets loaded by Ajax and binds a click to it
                        // for jQuery versions earlier than...