ajax when loading

[angel777]

hi.. may i know how do i create the page with the ajax effect when it load to display for data?

i curenntly have 3 comboxbox, once user select the value they want, my program need to wait for about 3 seconds.

 

my intention is to display the ajax waiting loading function for that 3 seonds.

 

thanks ..

[dannyb785]

What I do is have in my submit field, it's a type=button(not type=submit) and I say "onclick='loading(); function(); this.submit(); "

 

where, loading() is a function that just outputs a loading animation wherever I specify, function does the ajax call to another php file, and then submit() submits the form(if you want to submit). If you dont want to submit anything, then keep that function out.

[angel777]

thanks for the reply . i had tried search some tutorial in the internet.. but i failed to search what i needed.

 

can u provided me some examples to refer with ?

 

thanks

[dannyb785]

Here's some from one of my sites...

 

I have a table that displays and can be hidden by clicking a link, which will remove it, using ajax. So the link is:

 

<a onclick="ajax_loader('ran_pic'); switch_ran_pic();" style="cursor:pointer;">Hide Picture</a>

 

where ajax_loader() basically overlays the 'ran_pic' div with the loading image gif. initially, the table is within the ran_pic div. To demonstrate this it's like:

<div id='ran_pic'>
<table>
yadda yadda 
</table>
</div>

 

Basically, ajax_loader is an ajax function that calls "loader.php" which echo's out the ajax spinning animation gif that, in essence, replaces the table. This will show the animation. Then the switch_ran_pic() function is another ajax function which basically inserts a blank document into the 'ran_pic' div, hence removing it. The same process is done to display the table if it's hidden, only in the switch_ran_pic() function, it'd check if the pic was hidden and display it if it was(by echo'ing the table, which would end up overlaying the animation).

 

and here's my ajax code in my jsfunc.js file

 

function ajax_loader(div){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById(div);
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "ajaxloader.php", true);
ajaxRequest.send(null);
}

function switch_ran_pic(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ran_pic');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "switchranpic.php", true);
ajaxRequest.send(null);
}

 

 

Hope this helps. you'll need to modify the js functions to do what you need.

 

p.s. I can't explain to you exactly what all my ajax functions are doing, but all I know is they work perfectly and I can modify them as I like without trouble. But I got the original function from some website(no clue where). Oh, and there's probably an easier way to replace the ran_pic div with the animation, but I haven't looked into it.

[angel777]

this sample seem to be complex to me.. 

 

i am just looking for a sample which will load the efffect while the query is searching for the data to display for user.

[dannyb785]

It's not complex if you understand what is needed to happen. You have a div with an id of 'xyz', you need a link that will insert the animation when you click the link and then will insert the table after displaying the animation. I took the time to explain everything that is going on. You need to understand what is happening for it to make sense and also if you want to modify something in the future. Sometimes things arent as simple as we hoped they'd be

[angel777]

Thanks .. it really help.

 

i wonder how do i put in the css ? i meant when it load.. the page will become grey and canot be edited.