CODEWITHSUNDEEP
javascriptjquery
EsTeGe
EsTeGe

Reputation: 3055

Multiple Ajax loading indicators on 1 page

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!

Upvotes: 3

Views: 1112

Answers (2)

Edd Morgan
Edd Morgan

Reputation: 2923

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)

Upvotes: 3

Dan Prince
Dan Prince

Reputation: 29989

Have you thought about starting it when your form is submitted and hiding the other.

$('.yourSubmitButton').click(function () {
    $(this).parent().find('.ajaxLoader').show();
});

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

So the loader will show inside the form that has just been submitted (I assume you are doing a submit with a button or a link?) then both are hidden again when the ajax request stops.

Upvotes: 1

Related Questions