Contextual Pre-Loader

by noppanit

HTML

<div class="ajaxContainer">
    <a id="link1">click to fire ajax</a>
</div>

<div class="ajaxContainer">
    <a id="link2">click to fire ajax</a>
</div>

CSS

.pre-loader {
    background: rgba(255,0,0,0.2);
}

JavaScript

$(document)
.on('ajaxBeforeSend', function(e, xhr, options) {
    $(e.target).closest('.ajaxContainer').addClass('pre-loader');
})
.on('ajaxComplete', function(e, xhr, options) {
    $(e.target).closest('.ajaxContainer').removeClass('pre-loader');
});


$('#link1').on('click', function (e) {
    $.ajax({
        url: '/echo/json',
        context: e.target,
        success : function (data) {
            console.log(data);
        }
    });
});


$('#link2').on('click', function (e) {
    $.ajax({
        url: '/echo/json',
        context: e.target,
        success : function (data) {
            console.log(data);
        }
    });
});