autoajax jQuery plugin

This plugin converts normal anchors (links) into AJAX requests. If Javascript is disabled or otherwise unavailable the links continue to function!

The code uses markup which is valid converting this:

<a href="page.html#result">Link name</>

In to an AJAX call which will load "page.html" into the element named "result".

Demo #1

The following example shows a link which will load the content of a page into a named ID, via an AJAX request:

The code used is:


<script>
$(function() {
   // all links in the div called "magic"
   $("#magic a").autoajax()
  })
</script>
<div id="magic">
  <a href="demo.html#result">Link</a>
</div>
<div id="result">
This is empty
</div>

Demo #2

The following example shows all links with the class "ajax" will be converted. We've also added an oncomplete function so that once the request has loaded we show an alert:




The code for this example is:


<script>
$(function() {
   // all links which have the class "ajax"
   $("a.ajax").autoajax( oncomplete: function() { alert("completed") } );
  })
</script>

<ul>
<li><a href="README#demo2" class="ajax">Demo Link</a></li>
<li><a href="jquery.autoajax.js.txt#demo2" class="ajax">Demo link: Javascript</a></li>
</ul>
<div id="demo2">
</div>

Options

The optional arguments passed to this method may be used to pass anything recognised by the jQuery Ajax method.

For example you can append the returned data rather than replacing it:

 $("#success a").autoajax( { success: function(html) { $("#success").append(html) ; } } );

You could also make a POST request instead of a GET request:

 $("#success a").autoajax( { type: "POST" } );

Links

Download the plugin from the following link: