Ajax

by Raphaël

HTML

<button>GO</button>
<div id="send">Send</div>
<div id="complete">Complete</div>
<div id="success">Success</div>
<div id="fail">Fail</div>

CSS

div {
    height:1em;
    opacity:0;
    padding:5px;
}
#send {
    background-color:blue;
    color:white;
}
#complete {
    background-color:yellow;
}
#success {
    background-color:green;
    color:white;
}
#fail {
    background-color:red;
}

JavaScript

function mYajax(options) {
    var temporaryVariable = options.success
    options.success = function (data, textStatus, jqXHR) {
        console.log(jqXHR)
        if (typeof temporaryVariable === 'function') temporaryVariable(data, textStatus, jqXHR)
    };
    return $.ajax(options);
}

$('button').click(function () {
    mYajax({
        method:'post',
        url: "/echo/json/",
        data: {
            json: "it'sok"
        },
        beforeSend: function (data, textStatus, jqXHR) {
            $('#send').css('opacity', '1');
            console.log('send');
        },
        success: function (data, textStatus, jqXHR) {
            $('#success').css('opacity', '1');
            console.log('success');
        },
        complete: function (data, textStatus, jqXHR) {
            $('#complete').css('opacity', '1');
        }
    });
});