By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,594 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

How can I show spinners during different Ajax requests?

P: 28
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:
Expand|Select|Wrap|Line Numbers
  1. Stations
  2.    <select name="selectStation" id="selectStation" onchange="sta_callStation(this);">  
  3.      </select>
  4.  
  5.         <div id="noOfPassengers"></div>
  6.  
  7.         <div id="sta_numberOfIcons"></div>
  8.  
  9.         <div id="spinner">
  10.         <img src="ajax-loader.gif" alt="Loading..." />
  11.       </div>
Javascript side:
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. $('#spinner').ajaxStart(function () {
  3.     $(this).fadeIn('fast');
  4.     //Set time interval
  5. }).ajaxStop(function () {
  6.     $(this).stop().fadeOut('fast');
  7. });
  8.  //There are lots of functions here
  9. </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.
Apr 22 '13 #1

✓ answered by omerbutt

You can bind the ajaxStart and ajaxStop using custom namespace:
Expand|Select|Wrap|Line Numbers
  1. $(document).bind("ajaxStart.mine", function() {
  2.     $('#ajaxProgress').show();
  3. });
  4.  
  5. $(document).bind("ajaxStop.mine", function() {
  6.     $('#ajaxProgress').hide();
  7. });
  8.  
Then, in other parts of the site you'll be temporarily unbinding them before your .json calls:
Expand|Select|Wrap|Line Numbers
  1. $(document).unbind(".mine");
  2.  
Got the idea from here while searching for an answer.

Share this Question
Share on Google+
2 Replies


omerbutt
100+
P: 638
Hi notofound,
you might try too use the parameter of the ajaxstart function like this
Expand|Select|Wrap|Line Numbers
  1. $(document).ajaxStart(function(a) {
  2.     alert(a.toSource());
  3.  
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
Expand|Select|Wrap|Line Numbers
  1. ({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) {
  2.     alert(a.toSource());
  3.  
  4.     $( ".log" ).text( "Triggered ajaxStart handler." );
  5. }), guid:2, selector:(void 0), needsContext:(void 0), namespace:""}})
  6.  
it would have something appended to it for every unique call that you could use to spin only the relevant areas
regards,
Omer ASlam
Apr 24 '13 #2

omerbutt
100+
P: 638
You can bind the ajaxStart and ajaxStop using custom namespace:
Expand|Select|Wrap|Line Numbers
  1. $(document).bind("ajaxStart.mine", function() {
  2.     $('#ajaxProgress').show();
  3. });
  4.  
  5. $(document).bind("ajaxStop.mine", function() {
  6.     $('#ajaxProgress').hide();
  7. });
  8.  
Then, in other parts of the site you'll be temporarily unbinding them before your .json calls:
Expand|Select|Wrap|Line Numbers
  1. $(document).unbind(".mine");
  2.  
Got the idea from here while searching for an answer.
Apr 24 '13 #3

Post your reply

Sign in to post your reply or Sign up for a free account.