loading image while jquery is loading

[aaronkmar]

Trying to get a loading image to spin while the query is loading.

I can get the data div to fade in, but I can't seem to figure out how to get the gif while the query is loading.

I'm using two divs..

id "entrytext" is where the data will load into and has a display:none

contentLoading is the loading gif div.

Currently using jquery with this script.

$(document).ready(function(){
$("#entrytext").fadeIn('slow');  //Sub-form query results go here.
$("tr:odd").addClass("highlight");  //Table alternates
 
 

I tried using this information, but I'm unable to translate the example's external page load into something that works for me.

jQuery(function($) {   
$("#contentArea").load("test.php");   
});   
 
$().ajaxSend(function(r,s){   
$("#contentLoading").show();   
});   
 
$().ajaxStop(function(r,s){   
$("#contentLoading").fadeOut("fast");   
});   
 

instead of an external test.php I've got a combo box that sends viewons.php?ons id=+this.value to itself.

Here's a link to what I'm working on. (The data is NOT REAL)

Anyone mind helping me understand what more I should do?

Respectfully,
Aaron

[gits]

i don't see where you are doing an AJAX-request in your example?

kind regards

[aaronkmar]

In other words... "You're doing it wrong!" ?
I'll keep googling...

[gits]

when you do an ajax-request that request is async and you could show a loading-image or something like that ... since that avoids a page-reload and the browser is executing the request in a way so that it is 'free' to process other things in the meantime. when you do a plain old page-reload then that is sync and the browser waits for the result and is blocked ... so you might use jQuery's ajax-class to retrieve the data ...

kind regards

[aaronkmar]

Thanks again gits.
It looks like I'm trying to do this without ajax, only jquery.

I'm very close to working it out, all I need to figure out is how to show the loading image while the DOM is being prepared instead of waiting until the page is ready to hide the load image and fade in the results div.

here's the code

$(document).ready(function(){
var loadImg = $('#loadImg');
loadImg.show();
var linResults = $('#entrytext');
linResults.hide();
loadImg.hide(1000);
$("#entrytext").fadeIn(2000);
$("tr:odd").addClass("highlight");
});
 
 

I'll keep trying to figure it out.
Link to the page is here.

Respectfully,
Aaron

[aaronkmar]

I got it working!
No idea what I did
But at least it's working as intended.

/scratches head...being a n00b really sucks.

[gits]

as far as i could see you reload the page on change of the select. when the page is loaded you show the loading gif and hide the contentarea for a specific amount of time. but the data is already in the page ... since it is delivered during the page reload?

kind regards