Description:

Ajax Engine is a small modular widget thats used to add ajax functionality to simple html pages. The engine was built useing the Mootools javascript framework as a base.

Features:

Multiple Instances:
The engine allows for multiple instances of its self to exsist on the same page. This allows users to apply ajax code retrieval to more then one area on one page.

URL Hash:
The engine is built to handle page refreshing, and history tracking of individual content area's allowing for the use of the back and forward buttons inside the single ajax page. this use of the url hash also makes bookmarking specific page states possible.

*Note: the back and forward buttons will not work in IE7/IE6 due to how the browsers history treats hash URL's

Custom Events:
The engine lets developers apply their own events to the stages of the engine. the events available are: complete, start, failure, and initialize.
Custom Events give developers full flexibility of how the engine handles the ajax data.
A full description of the events can be found in the documentation.

*Note: the pre-set events for on complete and on request can be taken off using the mootools .removeEvents function.

Degrades Elegantly:
Because of how the engine intercepts the hyper links, the website will not break when users have scripts turned off. instead of changing the href of each link, the Ajax Engine simply stops its default onClick event.
this means the href stays intact allowing non-script clients and site spiders (like googles) to navigate the site normaly and fluently.

Stand-Alone Availability:
Although it is recommended to use the ajaxEngine in tandem with the Mootools javascript framework, this widget is also available in a larger standalone version which can co-exsist on the same page as other frameworks such as Jquery, Dojo, or Prototype.

Known Bugs:

• IE8 history tracking is clunky and slow to respond to back button.
• history tracking on older versions of Safari does not work.

Documentation:

Implements:

Syntax:

Arguments:

1. targetElement - (element) Container to dynamicly change and fill with ajax retrieved code.
2. options - (options, optional) See below.

Options:

• linksrc - (string, defaults to all current links on page) Container that holds the hyperlinks to intercept. also accepts an array of container id's. example: ["menu1","menu2"]
• loadFrom - (string, defaults to targetElement id) id of the element to extract the code from.
• loadingImg - (string, defaults to "Loading...") location of the image to use during ajax loading states. defaults to the text string "Loading..."
• defaultIndex - (integer, defaults to 0) the index of the link for the element contents to default to if no hash information is available for the object instance.
• evalScripts - (boolean, defaults to false) toggles evaluation of scripts nested inside request responses
• customEvents - (boolean, defaults to false) if true, prevents events from being pre-set. used in extreme event customization.

Events:

-- start --

-- complete --

-- failure --

-- initialize --

Properties:

• running - (boolean) True if the request is running.
• loadingHTML - (string) HTML that's displayed during loading states.
• orginalState - (boolean) True if element is in its original state

Example:

Html:

<ul id="menu">
<li><a href="./index.htm">Description</a></li>

<li><a href="./doc.htm">Documentation</a></li>
</ul>

<div id="content">
Content Text
</div>

JavaScript:

window.addEvent("domready",function(){
var myAjax = new ajaxEngine("content",{

     linksrc: "menu"
     loadingImg: "./loadingAnimation.gif"
});
});

Change Log:

-- 8/16/2009 --

changes:

• added new options: customEvents and evalScripts.
• built in IE history tracking and support
• added new property orginalState

bug fixes:

• recoded history tracking.
• fixed bug when pushing the back button all the way to the orginal state

-- 4/3/2009 --

changes:

• Changed option variable name from extractionId to loadFrom for clarification reasons
• added new Property loadingHTML

Demo:

• Example One
• Page 1
• Page 2
• Page 3
• Page 4
• Page 5

window.addEvent('domready',function(){

var firstAjax = new ajaxEngine('main',{
     linksrc: "main_menu"

});
});

• Example Two
• Page 1
• Page 2
• Page 3
• Page 4
• Page 5

window.addEvent('domready',function(){
var secondAjax = new ajaxEngine('example_two',{

     linksrc: "ex2_menu",
     loadFrom: "main",
     loadingImg: "loadingAnimation.gif"

});
});

• Example Three
• Page 1
• Page 2
• Page 3
• Page 4
• Page 5

• Page 5
• Page 4
• Page 3
• Page 2
• Page 1
• Example Three

window.addEvent('domready',function(){
var thirdAjax = new ajaxEngine('example_three',{

     linksrc: ["menu_one","menu_two"],
     loadFrom: "main"

});
});

Download:

You can download the Mootools framework HERE.

Requires Mootools

Standard Version:

--> Compressed (4KB): ajaxEngine.js
--> Non-Compressed* (8KB): ajaxEngineFULL.js
*Recommended for developing purposes

Standalone Version:

--> Compressed (67KB): ajaxEngine_Standalone.js