can you help me add a "throbber" to this ajax function

Question

Basically, on my page an image is called to div#imagebox when the function is executed. But sometimes the image is large and can take awhile to load, especially if it hasn't been loaded into the cache yet. I would like to give the user some notice that the request is being processed. I think I can do this with a throbber. I would like the throbber to be displayed in div#imagebox until the image is ready. Then I would like the throbbber to disappear.

I've looked at this page http://plugins.jquery.com/project/throbber but I don't really understand what I'm supposed to do.

Could i add something like $("div#imagebox").throbberShow(true); into the existing function (see below?) But where would I add it? Do i need the parameter true ?

Thanks for your help.

 function showImage(ms, pid)     
 {
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

Don't ever do `$('div#imagebox')`. It's a *lot* slower than just `$('#imagebox')`. — Adam Terlson, Oct 11 '11 at 18:52
ok -- I didn't know that. I put the div prefix there all the time. I will stop doing that :) — Jeff, Oct 11 '11 at 18:57

score 0 · Accepted Answer · edited Oct 12 '11 at 03:01

0

In your case it looks like you would add it as follows. I don't believe the true parameter is necessary:

function showImage(ms, pid)     
 {
   $.throbberShow({ajax: true, parent: imagebox); // add this line.
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

This should load the image into #imagebox, and when the ajax is done loading, it should overwrite whatever is in there.

edited Oct 12 '11 at 03:01

Jeff

3,943
8
45
68

answered Oct 11 '11 at 18:48

Doozer Blake

7,677
2
29
40

ok, great I'll give that a try -- can I also ask: is there a built in throbber image in the jquery library? How does the script know where to get the animation? – Jeff Oct 11 '11 at 18:53
It appears to use throbber.gif which is in the download by default if it's in the right place, but it shows you can specify your own image in the samples. – Doozer Blake Oct 11 '11 at 19:02
Since I don't have enough rep - I can't answer my own question -- but after some work, I figured out the answer you gave needs some slight modification. $.throbberShow({ajax: true, parent: imagebox}); The `ajax: true` parameter doesn't need to be there since it is the default, but the `parent: imagebox` parameter **is key.** My main problem was trying to use the ajax target `div` as the selector -- when it needs to be one of the option parameters of `throbberShow`. It took me a while to figure that out. – Jeff Oct 11 '11 at 21:51

can you help me add a "throbber" to this ajax function

1 Answers1