jQuery ‘AjaxLinks’ Plugin
I previously wrote an article showing how you can turn a normal ‘A’ link into an ajax request and place the returned content into divs. This does the same job but used as a jQuery plugin with more customizable options and flexible use.
The download is at the bottom of the article and the script in the zip file is minified to 1.22kb; the code below shows the full script.
The plugin
The plugin contains one function only ajaxLinks and has various options for how the AJAX request is handled; firstly – the full script.
(function($){
$.fn.extend({
ajaxLinks: function(options) {
var defaults = {
spinner : null,
spinnerClass : 'ajSpinner',
method : 'GET',
append : false,
ajaxKeyword : 'ajax',
resultKeyword : 'resultdiv',
postDataKeyword : 'postData',
removeKeyword : 'remove',
removeSpeed : 'slow',
dataType : 'html',
removeLink : false,
timeout : 100,
password : ''
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$('a').click(function(e){
var blnAjax = $(this).attr(o.ajaxKeyword);
if (blnAjax) {
e.preventDefault();
var ahref = $(this).attr('href');
var resultDiv = $(this).attr(o.resultKeyword);
if (o.spinner) {
$(resultDiv).append('<img class="' + o.spinnerClass + '" src="' + o.spinner + '" alt="Loading" title="Loading" />');
}
if (o.removeLink || $(this).attr(o.removeKeyword)) {
$(this).hide({speed:o.removeSpeed});
}
var postData = $(this).attr(o.postDataKeyword);
$.ajax({
type: o.method,
dataType: o.dataType,
password: o.password,
timeout: o.timeout,
url: ahref,
data: postData,
success: function(html){
if (o.append) {
$(resultDiv).append(html);
} else {
$(resultDiv).html(html);
}
},
error: function(e){
alert(e);
}
});
}
});
});
}
});
})(jQuery);
It’s not a very large plugin but it is very effective in what it does. It has the following options (the below values are default)
The plugin options
spinnerClass : ‘ajSpinner’ – The CSS class to attach to the spinner image.
method : ‘GET’ – The method in which to get the AJAX request (GET/POST)
append : false – Append the content in the specified DIV (true/false)
ajaxKeyword : ‘ajax’ – The word used in the ‘A’ link to enable AJAX.
resultKeyword : ‘resultdiv’ – The DIV to place the content in.
postDataKeyword : ‘postData’ – The word used in the ‘A’ link for post data.
removeKeyword : ‘remove’ – The word used in the ‘A’ link for removing the link on success.
removeSpeed : ’slow’ – The speed in which to animate the removal of the link.
dataType : ‘html’ – The type of request.
removeLink : false – Remove the link on success of the AJAX request.
timeout : 100 – The timeout of the AJAX request.
Now that you know what the options do it’s time to look at the usage.
Plugin usage
Firstly to use the plugin you need to include the jQuery library; after that include the plugin file and you are on your way! See the code below for example usage.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Plugin test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.ajaxlinks.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).ajaxLinks({'method':'GET'});
});
</script>
</head>
<body>
<a href="test_content.html" ajax=true remove=true resultdiv="#test">Click!</a>
<div id="test"></div>
</body>
</html>
Notice the above line.
<a href="test_content.html" ajax=true remove=true resultdiv="#test">Click!</a>
This is a prime example of how to get the test_content.html file with AJAX and place it in the #test DIV – just by using HTML markup, no added Javascript needed. The plugin will attach it’s self to all the ‘A’ links on the page and check to see if ajax=true is set. You can change the ajax=true to whateverword=true to enable AJAX; this is what the ajaxKeyword option is for in the plugin.
This plugin was done quickly so if you encounter any problems with the code or suggestions on how to improve or optimize it then please feel free to contact me or leave me a comment.
I have provided the above sample files in the ZIP file along with a minified version of this script.