How can I show spinners during different Ajax requests?

[notfound]

I want to show spinners when making different Ajax calls.Now, I can show a spinner under a combobox, but I want also to show one more spinner(it can have the same properties with the other spinner) in another part of the html page.For example I have:

Stations
   <select name="selectStation" id="selectStation" onchange="sta_callStation(this);">  
     </select>
 
        <div id="noOfPassengers"></div>
 
        <div id="sta_numberOfIcons"></div>
 
        <div id="spinner">
        <img src="ajax-loader.gif" alt="Loading..." />
      </div>

Javascript side:

<script>
$('#spinner').ajaxStart(function () {
    $(this).fadeIn('fast');
    //Set time interval
}).ajaxStop(function () {
    $(this).stop().fadeOut('fast');
});
 //There are lots of functions here
</script>

There are more than one Ajax calls in my script.For example, when the user selects a station from combobox sta_callStation () is called and there is $.getJSON in it.The spinner is shown when the user clicks a station from the combobox.But because there are also another Ajax calls, when I call the other Ajaxs, the spinner below the combobox is also start to spin.I want to create another spinner under the related div.How can I seperate spinners?How can I do that?Thanks for any reply.

[omerbutt]

Hi notofound,
you might try too use the parameter of the ajaxstart function like this

$(document).ajaxStart(function(a) {
    alert(a.toSource());
 

you will have the output like object [Object] if you alert a without converting it to source , and once you do you will have to look into the ource text of the object like the following

({type:"ajaxStart", timeStamp:1366800488561, jQuery18306740114199208432:true, isTrigger:true, exclusive:(void 0), namespace:"", namespace_re:null, result:(void 0), target:({}), delegateTarget:({}), currentTarget:({}), data:(void 0), handleObj:{type:"ajaxStart", origType:"ajaxStart", data:(void 0), handler:(function (a,b,c) {
    alert(a.toSource());
 
    $( ".log" ).text( "Triggered ajaxStart handler." );
}), guid:2, selector:(void 0), needsContext:(void 0), namespace:""}})
 

it would have something appended to it for every unique call that you could use to spin only the relevant areas
regards,
Omer ASlam

[omerbutt]

You can bind the ajaxStart and ajaxStop using custom namespace:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});
 
$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});
 

Then, in other parts of the site you'll be temporarily unbinding them before your .json calls:

$(document).unbind(".mine");
 

Got the idea from here while searching for an answer.