Ajaxify – jQuery plugin

What is it?

Ajaxify is a jQuery plugin. it can convert all links in a web page into an ajax load and submit requests. with this ultra weight plugin, you can build a complex ajax website with one single line. welcome to web 2.0 world!!.

Instructions:

  1. Download the plugin.
  2. upload it to your website along with jQuery library if you still don’t have it.
  3. Add these lines in the top of your page.
    4. <script type="text/javascript" src="ajaxify.js"></script> <script type="text/javascript">   $(document).ready(function() {    $('.ajaxify').ajaxify(); });</script>
  1. Add class “ajaxify” to the ‘a’ tag and specify the target on which the output will take place. Ex:
    2. <a class="ajaxify" href="example.php" target="#container">Click here</a>
  2. Thats it, you can specify more options. See examples for more details.

Features:

  1. Ajax GET and POST requests.
  2. History & bookmarking support.
  3. Partial load from the output.
  4. Four events support.
  5. Forms Support.
  6. Animations.

Examples & Download:

Examples and download are available in the new plugin hompage.

Compatibility:

Tested on IE7, opera 9.5 , firefox v2, v3 and safari 3.1 With jQuery 1.2.6

Options list:

Option Value Default Note
event blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error click Since v2.0 this can be set false to fire the request oncall.
link string false link to the page that is going to be loaded (instead of href)
target jQuery selector #container you can use any method of jquery selection: #id, .class, element …
animateOut object false animate target before starting the request
animateIn object false animate target onsuccess
animateOutSpeed number, reserved strings normal
animateInSpeed number, reserved strings normal
method string ( GET, POST, PUT, DELETE) GET (PUT, DELETE are not supported by all browsers)
tagToload jQuery selector, object false since v2.0 you can set this option to multiple tags and targets
loading_txt text false something like “Please wait…”
loading_img string images/loading.gif Path to the loading image
loading_target jQuery selector same as target the animated loading image place
loading_fn function jQuery.ajaxifyLoading(options);
loadHash boolean attr:rel , attr:href , attr:title or string (direct hash) false See examples about this option.
title text empty page title for the request
forms jQuery selector for forms, input, textarea .. etc false
params string , function ajax=true since v2.0 this option can be used as a function
timeout number false in ms. there is a bug in this option on linux servers
contentType string application/x-www-form-urlencoded it depends on loaded data. don’t change it if you dont know what it is.
dataType string html
cache boolean false control the browser to cache data or not.
username string false A usename to be used in response to an HTTP access authentication request.
password string false A password to be used in response to an HTTP access authentication request.
onStart function false A pre-callback to modify the XMLHttpRequest object before it is sent
onError function false A function to be called if the request fails.
onSuccess function false A function to be called if the request succeeds
onComplete function false A function to be called when the request finishes (after success and error callbacks are executed)


Support:

Any Comments, bugs , feature request, please post it here for v1.0 or here for v2.0