Ajax Machine Events

Overview

The previous article on Ajax Machine covered the fundamentals of setting up an Ajax Machine. In this article we take a few steps forward towards integrating before and after events that are triggered for each action.

Demo

This demo builds upon the previous article with two additional requirements:

1. Ask the user for confirmation when the Edit button is pressed
2. Make the resulting list(edit mode) sortable

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

How does it work?

To briefly review the discussion from the previous article:

1. Every Page (or a portion of a page) has a set of states
2. Each state has actions that are triggered by the user
3. These actions may or may not cause the current state to change.

Before and after events can be specified for every action. The before event handler must return true in order for the action to be execute. The after event handler must return true in order for the next state to be bound.

In this demo, the before event handler returns the result of a confirm method call. The after event handler calls jquery.ui.sortable to make the resulting list sortable.

Demo Example

$(function(){
  canEdit = function(widget){
    return confirm("Are you sure?");
};

makeSortable = function(widget){
    $("#list_items_container").sortable({
        opacity: 0.7,
        revert: true,
        scroll: true, 
        handle: $(".drag_handle"),
        cursor: "move",
        axis:'y',
        placeholder: 'sort_placeholder'
        });
        return true;  
};

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

This series

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