[SOLVED] Making page update after each ajax GET request?

soadlink · June 9, 2009

Here is a basic look at what I'm trying to do:

- User enters data into a textarea box as a list and submits it

- Javascript code splits the list into an array by the line break "\n".

- Javascript code makes a GET request to a php script for each item in the array (depending upon what the item is).

- The php script returns data.

I want the replies from the php script to be displayed on the page as they are received (live!). By changing my code, it will either show all the replies AFTER they have all been received...or it will only send/receive a reply for the last item in the list.

You might ask why I don't just process the list all at once instead of using a GET for every item in the list. The reason is that I wan't things to look good for the user. When they submit the data, I want them to be able to watch the replies for each item as they are received (assuming this is possible) instead of waiting until they are all done.

Below is my code. You may notice in ajax.js that the GET request is false (synchronous). This was the only way I could get it to process all items in the list. If I set this to true, it would only process the last item. Thanks in advance

<?php
$currentlistitem = $_GET["currentlistitem"];
echo $currentlistitem;
sleep(1);
?>

<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form>
<textarea id="ta1" rows="15" cols="30" name="ta1"></textarea>
<br/><br/>
<input id="submit" type="button" name="submit" value="Submit" onclick="processlist(document.getElementById('ta1').value)"> 
</form>
<b><label>Response: </label></b><br/>
<div id="ServerResponse"></div>
</body>
</html>

var xmlhttp;

function processlist(list){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
	alert ("Browser does not support HTTP Request");
	return;
}

var splitlist=list.split("\n");

for ( var i in splitlist ){
	var url="phpscript.php?currentlistitem=";
	var currentlistitem=splitlist[i];
	finalurl=url+currentlistitem;
	xmlhttp.onreadystatechange=statechanged;
	xmlhttp.open("GET",finalurl,false);
	xmlhttp.send(null);
}
}

function statechanged(){
if (xmlhttp.readyState==4){
	document.getElementById("ServerResponse").innerHTML=document.getElementById("ServerResponse").innerHTML+xmlhttp.responseText+"<br>";
}
}

function GetXmlHttpObject(){
if (window.XMLHttpRequest){
	// code for IE7+, Firefox, Chrome, Opera, Safari
	return new XMLHttpRequest();
}
if (window.ActiveXObject){
	// code for IE6, IE5
	return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

soadlink · June 9, 2009

Nevermind, I think I got it working by using jQuery.get from the jQuery library

function processlist(list){
var splitlist=list.split("\n");
for ( var i in splitlist ){
	var finalurl="phpscript.php?currentlistitem="+splitlist[i];
	jQuery.get(finalurl, function(sreply){
	document.getElementById("ServerResponse").innerHTML=document.getElementById("ServerResponse").innerHTML+sreply+"<br>";
	}
	);
}
}

And it's asynchronous, so that's nice

Sign In

[SOLVED] Making page update after each ajax GET request?

Recommended Posts

soadlink

Link to comment

Share on other sites

soadlink

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information