Hello, I'm new at Ajax and Javascript. Can anyone help me on this?

I'm calling 2 Ajax funcions, one after the other, with a delay time in between.

The first call executes a script that inserts a row in a MySQL database.
The second call execustes a cript that lists what's in the database.

What I'm losing is the response from the first script saying a row has been inserted, for instance. It should appear in a div named "message".
Seems the response from the second script overrrides it, although it goes to another div named "rows".

What I'm trying now is storing the response from the first call in a variable named "reply" and then showing it in the div, along with the reply from the second call. But it's not working (shows as "undefined"), and I don't know why... any help very appreciated.

var xmlhttp;
var reply;
function insertList(str)
{
	insert(str);
	setTimeout("list()", 100);
}
function list()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Browser too old");
		return;
	}
	var url="list.php";
	url=url+"?sid="+Math.random();
	xmlhttp.onreadystatechange=stateChangedList;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
function insert(str)
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Browser too old");
		return;
	}
	var url="insert.php";
	url=url+"?nom="+str;
	url=url+"&sid="+Math.random();
	xmlhttp.onreadystatechange=stateChangedInsert;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
function stateChangedLlist()
{
	if (xmlhttp.readyState==4)
	{
		document.getElementById("rows").innerHTML=xmlhttp.responseText;   <------ THIS MESSAGE SHOWS OK.
		document.getElementById("message").innerHTML=reply;    <---- THIS IS WHAT I'M TRYING NOW BUT IT'S NOT WORKING. SHOWS AS "undefined"
	}
}
function stateChangedInsert()
{
	if (xmlhttp.readyState==4)
	{
	document.getElementById("message").innerHTML=xmlhttp.responseText;   <----- THIS MESSAGE IS LOST.
	reply=xmlhttp.responseText;     <----- THIS IS WHAT I'M TRYING NOW BUT IT'S NOT WORKING.
	}
}
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;
}

Anyone could give me a hint? still struggling with this.

The simple, and conventional, solution would be to make just one AJAX call with one response containing all the info you need to display as feedback to the user (ie a confirmation message that the insertion has been made, plus the list of what's in the database).

Two calls with two responses seems to add unnecessary complexity and uncertainty.

You may need to use JSON to encode your data server-side and to decode client-side. That's what JSON does. Google "JSON" for a more detailed description/tutorial.

Javascript is easily capable of handling the two parts of the decoded response separately - eg. displaying one part in one div and the other part in another div.

Airshow

Thanks a lot for your reply! going to try this asap.

Altairzq,

I think you have it!!!!

Good luck.

Airshow

By George it's working!

Made a little test and i'm displaying two different messages in two divs, from a single call. The JSON functionality is just what I needed, had no idea it existed.

Thank you so much Airshow :)

Altairzq,

Well done. You have learned a lot in the last 12 hours. It should serve you well in the future.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.