Ajax Machine Basics

What is it?

Ajax machine is a state machine for your page. It allows all the different ajax events and results to be configured in one place instead of strewn around in multiple places. Most web applications are developed using one form of template engine or another. Ajax templates are usually split up into small templets. In order to get a smooth single page interface to a mini web app, all these small templets have to be configured just right. Ajax machine alleviates many of these problems.

Demo

    Note: The above code is for demonstration and does not really save anything.

How does it work?

Ajax Machine to some extent enforces conventions over configuration.

These are the conventions, some are recommended and some are enforced.

1. All actions should be named(id=) as:(prefix)_(action_name)_action.
2. (Prefix) is provided as part of the callback. It is recommended that it take the form #(containerid).
3. All actions should have an href attribute, that contains the url corresponding to the action(Ajax get or post url). Since you need to have a href attribute, why not make it a link?

Now that the rules have been stated, lets move on to the fun part.

The State Machine

The AjaxMachine's state machine configuration is fairly intuitive.

1. A State contains a list of actions
2. An action has a name and also knows its target state(The state the machine will be set to if the action is successful). If the action does not change the state, the target state must be null.
3. The state machine knows the start state

Sequence of events

1. On Load, the container is bound to the state machine by an ajaxMachine call.
2. Ajax Machine in turn looks at the start state and binds to all the action buttons based on the actions specified for the current state and the above conventions.
3. User clicks on a action button(link, whatever).
4. Ajax machine handles the request by posting an Ajax Request to the url in the href attribute of the action button
5. When the response is received, it automatically loads the response into the container and binds the actions for the target state.

Demo Example

$(function(){
  $("#ajax_demo_container").ajaxMachine({
    prefix: function(widget){return "#ajax_demo_container";},
    startStateName: "view",
    states: {
   //  state: {actions: [S.ajaxAction("action_name", "next_state")]},
        view: {actions: [$.ajaxAction("edit", "edit")]},
        edit: {actions: [$.ajaxAction("view", "view")]}
    }
});
});

This series

1. Basics
2. Events
3. Plugins
4. Posting forms
5. Advanced machines