jQuery - Deferred Pipe - Triple ajax - with fail option and toastR

jQuery - Deferred Pipe - Triple ajax - with fail option

by johnpapa

HTML

<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr.css">
<script src="http://codeseven.github.com/toastr/toastr-responsive.js"></script>
<input type="checkbox" id="failBox"/><label for="failBox">Force failure</label>
<button type="button" id="goBtn">Make Requests</button>
<br/><br/>
<div id="target">Hello World</div>

<div id="testOutput">Testing</div>

CSS

body{
    margin: 10px;
}
#target{
    padding:10px;
    background-color: #4f69b5;
    width: 300px;
    color:white;
    border:solid 2px #4f68b5;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 10px;
}

JavaScript

var $testElement = $('#target');
toastr.options.timeOut = 20000;
    
var ajax1 = function(response) {
    var msg = 'ajax1 received: ' + (response.msg || 'no response');
    toastr.info(msg);
    if(response.fail){
        return $.Deferred().reject('Error in ajax1');
    }
    
    return $.ajax({
        type: 'POST',
        url: '/echo/json/',
        dataType: "json",
        data: {
            json: JSON.stringify({
                msg: 'ajax 1 data'
            }),
        }
    });
}

var ajax2 = function(response) {
    var msg = 'ajax2 received: ' + (response && response.msg ? response.msg : 'no response');
    toastr.info(msg);
    if(response.fail){
        return $.Deferred().reject('Error in ajax2');
    }
    return $.ajax({
        type: 'POST',
        url: '/echo/json/',
        dataType: "json",
        data: {
            json: JSON.stringify({
                msg: 'ajax 2 data'
            }),
        }
    });
}

var ajax3 = function(response) {
    var msg = 'ajax3 received: ' + (response.msg || 'no response');
    if(response.fail){
        return $.Deferred().reject('Error in ajax3');
    }
    toastr.info(msg);
    return $.ajax({
        type: 'POST',
        url: '/echo/json/',
        dataType: "json",
        data: {
            json: JSON.stringify({
                msg: 'ajax 3 data'
            }),
        }
    });
}

var fadeIn = function(response){
    var msg = 'fadeIn received: ' + (response.msg || 'no response');
    toastr.info(msg);
    return $testElement.animate({
            opacity: 1,
            marginTop: '-=200',
            marginLeft: '-=50'
        }, 1000);
};
var fadeOut = function(response){
    var msg = 'fadeOut received: ' + (response.msg || 'no response');
    toastr.info(msg);
    return $testElement.animate({
            opacity: .2,
            marginTop: '+=200',
            marginLeft: '+=50'
        }, 1000);
};

var addIt = function(response){
    var msg = 'addIt received: ' + (response.msg ||...