[SOLVED] jQuery / AJAX - How to show Ajax request status using a loading image...

[suttercain]

Hi everyone,

 

I am a newbie in jquery and have been stuck on this all morning. I am using the following function to perform an AJAX request which loads in the specified DIV:

 

function showUser(str)
{
  $('#content1').load("select.php?q="+str);
}

 

This works fine but I tried to add a loading gif (you know those nice circles) and I got it kind of working. The gif would show up and go away when the content was loaded but I had two problems. The image would show up on first load and just sit there until the user clicked a link for the AJAX request and the second error was the image would appear above the paragraph and not make the content go away until the new request was completed.

 

Can someone show a simple call to include the loading image so it's only displayed while the content is being fetched?

 

I tried this with no success:

 

$().ajaxSend(function(r,s){
        $("#content1").load("Loading data, please wait...");
   });

 

Thanks.

 

PS. I tried posting this over at jQuery.com but got an error message.

[rhodesa]

function showUser(str)
{
  //Set the contents to a loading message
  $('#content1').html('Loading data, please wait...');
  //Make the AJAX Call
  $('#content1').load("select.php?q="+str);
}

..and, since jQuery is awesome, you should be able to stack them into one command:

function showUser(str)
{
  $('#content1').html('Loading data, please wait...').load("select.php?q="+str);
}

 

[suttercain]

Dude that is awesome. Works like a charm. This has inspired me to pick up a book called "Learning jQuery" from Amazon.

 

Thanks!

[rhodesa]

nice, i love jquery. i will let you know though...the jQuery doc is pretty thorough. the book probably covers a lot more though (like building plugins for it, etc)