Question

I have a page with 2 separate forms that can be submitted via Ajax (jQuery). For each of these forms I’d like to show a loading indicator to the user. I have found a nice piece of code that can easily show these icons, but it only works when there’s 1 form.

$('.ajaxloader').hide().ajaxStart(function () { 
    $(this).show(); 
}).ajaxStop(function () {
    $(this).hide(); 
});

ajaxloader is a class which shows the loading image as a CSS background image. To use it, I just need to add something like: <span class="ajaxLoader">Busy ...</span>

When I test this with my page (that has 2 forms), and I submit one of the two, then both loading indicators appear (which is quite obvious). Now my question is, how can I show the indicator that needs to be shown? I was thinking about giving the span-tag an id attribute, but then I don’t know how to proceed. I want this to be as generic as possible, so I don’t have to hardcode and duplicate code a lot.

Thanks!

Answer 1

You could attach the “show loading indicator” callbacks to the Ajax queries themselves, not do a ‘catch-all’ like your current solution.

Something like this in your $.ajax() call:

$.ajax("/form1/target", {
    beforeSend: function() {
        $(".ajax-loader-1").show();
    },
    complete: function() {
        $(".ajax-loader-1").hide();
    }
});

(And a similar one for your second form, wherever the Ajax call for that is defined)