JSFiddle - React, Tailwind, and code Playground

by lifecube

HTML

<script src="http://rawgithub.com/lifecube/jQuery.chain.js/master/js/jQuery.chain.js"></script>
<script src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat-yc.js"></script>
<button id="test">Test</button>
<div id="console"></div>

JavaScript

function log(message) {
    $('#console').append($('<p></p>').html(message));
}

function clickTest() {
    log('start test');
    $.chain('admin', createRole, function (role) {
        return createUser('adminUser', role.id);
    }).done(function (user) {
        log('finish with user: ' + user);
    });
}

//simulate ajax functions, and framework is not from jQuery
function createRole(name) {
    log('start create role: ' + name);
    var dfd = $.Deferred();
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                id: 1,
                name: name
            }),
            delay: 1
        },
        onSuccess: function (response) {
            dfd.resolve(response);
        }
    }).send();
    return dfd;
}

function createUser(name, roleId) {
    log('start create user: ' + name + ' roleId: ' + roleId);
    var dfd = $.Deferred();
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                id: 2,
                name: name,
                roleId: roleId
            }),
            delay: 1
        },
        onSuccess: function (response) {
            dfd.resolve(response);
        }
    }).send();
    return dfd;
}

$(document).ready(function () {
    $('#test').click(clickTest);
});