problem with ajax

now i'm not quite sure that i'm in the right place with this thread, if not admins please do youre thing

so i have a page that on load should start some ajax and get some info from a different server, and display it in a different <div> tags on a page

before a try to explane the problem i would like to say that ajax is the only way to go with this, so please don't give me any new ways to display my content, just try to help me fix this

first off i'll put the code on

ajax.js

var xmlHttp;
	
function getTasks (){ 

	var url = "http://localhost/orvvis/ajaxHandler.php?function=getTasks" ;
	
	send(url , 2) ;
}

function getState (){
	
	var url = "http://localhost/orvvis/ajaxHandler.php?function=getState" ;
	
	send(url , 1) ;
	
	}

function send( url , fun) {

	alert ("sending");  //with this line in code all works well, to thats very strange

	xmlHttp = getXmlHttpRequest () ;

	if ( xmlHttp == null ) {

		document.getElementById("echoResponse").innerHTML = "<p style=\"color:red\"><i><b>Your browser does not support ajax!<i><b></p>" ;
	}

	xmlHttp.open ( "GET" , url , true ) ;
	
	if (fun == 1){
	
		xmlHttp.onreadystatechange = echoState ;
		
	} else if (fun == 2) {
	
		xmlHttp.onreadystatechange = echoTasks ;
		
	}

	xmlHttp.send( null ) ;
}

function echoTasks ( ) {

	if( xmlHttp.readyState == 4 ) {
		
		document.getElementById("listTasks").innerHTML =xmlHttp.responseText ;
	}
}

function echoState ( ) {

	if( xmlHttp.readyState == 4 ) {
		
		document.getElementById("echoState").innerHTML =xmlHttp.responseText ;
	}
}


function getXmlHttpRequest ( ) {

	if( window.XMLHttpRequest ) {

		return new XMLHttpRequest() ;

	} else if ( window.ActiveXObject ) {

			return new ActiveXObject( "Microsoft.XMLHTTP" ) ;

		} else {
		
			return null ;
		}
}
	```


html code : 

```markup
<script type="text/javascript" src="blocks/orvvis/Ajax.js"></script>
<script type="text/javascript" > getTasks(); </script>
	
<form action="javascript:getStatistic()">
								
    <div id="listTasks"></div>

    <input type= "Submit" value="Statistic" />

</form>
								  
<form action="javascript:startTesting()">

    <input type= "Submit" value="Test" />

</form>
								
<div id="echoResponse"></div>

<script type="text/javascript" > getState(); </script>
	
<div id="echoState"></div>```


as you can see from the code above on page load two thing should get displayed by ajax in two different divs , but the problem is tasks don't get displayed

with that alert in the code tasks do get displayed


so that is it any ideas

mestar wrote: now i'm not quite sure that i'm in the right place with this thread, if not admins please do youre thing

This section is fine. So is Webmaster's Lounge. Both apply.

so i have a page that on load should start some ajax and get some info from a different server, and display it in a different <div> tags on a page

No, you have a page that has Javascript function calls in it… without any specification that they should fire onload. Put each of the "getWhatever()" functions in a window.onload block (since that event fires close enough to a complete page load), like this:

window.onload = function(){
   getWhatever();
   getWhatever2();
}
</script>```

While the page is loading, some DOM elements may or may not exist yet, so the JS will need to wait until all of them have loaded to interact with them. That's why we use onload.

> 
before a try to explane the problem i would like to say that ajax is the only way to go with this, so please don't give me any new ways to display my content, just try to help me fix this

AJAX is the best solution. In your initial post, you specified that the AJAX call will be to a remote server. Cross-domain AJAX does not work; for that, you'd need to use cURL (PHP) to do the remote server call, then use AJAX local to your web server to call the script calling cURL.

So, either you need to clarify where the destination of the AJAX call is in relation to the calling page, or we just found why your script is not working.

Finally, I'd just like to note one more thing that needs improvement in the code. Down in the HTML portion of your code, you've got Javascript function calls in the action attribute of the forms. Since you have submit buttons anyways, why not use the form's onsubmit? For that matter, why even use forms? Turn those submits into buttons and give them onclicks. Just another (more proper) way to approach it.

first off thanks for giving me a hand with this.

i have been thinking of using cURL, but as i see it my , let's say "connection" to the remote server is working properly, because all the content all ask from the remote server throu ajax i get, but the problem acures when i have to display that content in a web page, so i thought that there is something wrong with my html or javascript

but allright i'll first test your ideas, and then we'll see.

In the echoTasks() and echoState(), try alerting the xmlHttp readystate. Also, alert the responseText inside of the ==4 conditional. This will accomplish 3 things:

1. Making sure the readystate checking even happens.
2. Making sure the readystate gets up to 4.
3. Making sure the response text is not empty.

Also, you need to use the Console tab of the Firebug extension for Firefox. It will let you see the sent AJAX request and the received response in real time.

Edit: You're welcome. Glad to help. :)

ok so i found what the problem was, ready state in echo Tasks( ) doesnt get to go to 4 it stops at 1 , because the function getState() starts to execute, and it overuns the first function so i paused the secend function for a second with setTimeout(), and now it works well

once again thanks for help

EDIT: nop, the problem remains, some how ready state wont get to 4 in the getTask function

so i did all that define suggested, but still no go on this, does anyone else have any idea???

after looking in the firebug, i can say that ajax is doing a good job sending and reciving info, but when time comes to display that info it …..well it doesnt work well

now i know that before xmlhttp ready state for the first pice of information (tasks) gets to 4 the secend info starts to increment his xmlhttp ready state, so the first one never finishes

mestar wrote: now i know that before xmlhttp ready state for the first pice of information (tasks) gets to 4 the secend info starts to increment his xmlhttp ready state, so the first one never finishes Ahh! I had no idea what you were saying when you mentioned the timeout. You're using one xmlHttp variable to perform two Ajax calls at the same time.

… Don't do that. Make two variables (or, even better, an array with two elements) and use them separately, or force one call to call the second one in its completed (4) readystate function.

Here is the ajax lib me and a friend made….your free to use it if you wish

function aj_makeRequest(url,target,oncomplete,failmessage,onfail,isform) {
	var httpRequest;
	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
		httpRequest = new XMLHttpRequest();
		if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType('text/xml'); }
	} else if (window.ActiveXObject) { // IE[code]
		try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); }
		catch (e) { 
			try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } 
			catch (e) {}
		}
	}
	if (!httpRequest) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;  }
	httpRequest.onreadystatechange = function() { if(target) aj_duringRequest(httpRequest,target,oncomplete,failmessage,onfail,isform); };
	httpRequest.open('GET', url, true);
	httpRequest.send('');
}

function aj_duringRequest(httpRequest,target,oncomplete,failmessage,onfail,isform) {
	try {
		if (httpRequest.readyState == 4) {
			if (httpRequest.status == 200) { aj_loadContent(httpRequest.responseText,target,oncomplete,isform); } 
			else { aj_loadContent(failmessage,target); setTimeout(onfail,1);}
		}
	}
	catch(e) { aj_loadContent('Caught Exception: ' + e.description,target); }
}

function aj_loadContent(data,target,oncomplete,isform) {
	if(isform=="YES"){
		document.getElementById(target).value = data;
		if(oncomplete){
		//oncomplete();
		setTimeout(oncomplete,1);
		}
	}else{
		document.getElementById(target).innerHTML = data;
		if(oncomplete){ 
		//oncomplete();
		setTimeout(oncomplete,1);
		}
	}
}

** Use - aj_makeRequest(url,target,oncomplete,failmessage,onfail,isform); url = the url where you want to get the data target = where to show the data oncomplete = if you want to run another javascript command if completes (optional) failmessage = Message to put in target (optional) Onfail = if you want to run another javascript command if fails (optional) isform = if the target is a form item like textbox