ajax refreshing problem

[adrive]

hi guys,

I'm new to ajax and i'm just following the examples from tizag and w3schools. Apparently, an application i'm trying to build is showing very peculiar behaviour.

I have a <span> section where it'll actually list out all my subject titles dynamically after a record has been inserted. However, it doesn't always list out all items with the latest added subject.

BUT

if i put an alert() before it loads the list, i won't have this problem! What's going on? is alert triggering something ? a state on ajax?

I'm using oracle 9, IE 7 and Firefox 2.

below is my ajax code that actually works.

[PHP]

function loadSubjectList(){
try
{

var xmlHttp = GetXmlHttpObject();
var url = null;
var param = null;

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById('subjectList').innerHTML=x mlHttp.responseText;
}
}

alert('Ahh!'); //need this to make below refresh 100%

url = "noteAction.php";

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

param = 'F_CALL=GETSUBJECTLIST';

xmlHttp.send(param);


}
catch(e){
alert("Failed to load." + e.message);
}

}

[/PHP]

[adrive]

apparently after a deeper research, the problem seems to be even weirder. The sequence of ajax execution is random!

in a html hyperlink, i'm calling this in sequence :

insertNewText();loadSubjectList();


Below are my codes and output, it contains,

1.) my insert code
2.) my display code
3.) my php code
4.) my logger output which shows the randomness happening

------------------------------------------------------------------------
1.) my insert code :

[PHP]
function insertNewText(){

if(validate(document.frmNote.txtSubject, 'Subject')){
try
{

var xmlHttp = GetXmlHttpObject();
var url = null;
var param = null;

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.frmNote.txtAreaNote.value=xmlHttp.respons eText;
}
}

url = "noteAction.php";

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

param = 'F_CALL=INSERTNEWTEXT';
param += '&SUBJECT=' + document.frmNote.txtSubject.value;
param += '&TEXT=' + document.frmNote.txtAreaNote.value;

xmlHttp.send(param);

}
catch(e){
alert("Failed to save.");
}
}

}
[/PHP]

2. my display code :

[PHP]

function loadSubjectList(){
try
{

var xmlHttp = GetXmlHttpObject();
var url = null;
var param = null;

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById('subjectList').innerHTML=x mlHttp.responseText;
}
}

url = "noteAction.php";

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

param = 'F_CALL=GETSUBJECTLIST';

xmlHttp.send(param);

}
catch(e){
alert("Failed to load." + e.message);
}

}
[/PHP]

3. my php code :

[PHP]

if(isset($_POST['F_CALL'])){

logger('F_CALL IS SET for ' . $_POST['F_CALL']);

if($_POST['F_CALL'] == "GETSUBJECTTEXT"){

echo getSubjectText();

logger("get subject's text");

}else if($_POST['F_CALL'] == "INSERTNEWTEXT"){

insertSubjectText();

logger("insert subject's text");

}else if($_POST['F_CALL'] == "GETSUBJECTLIST"){

echo getSubjectList();

logger("get subject lists");

}
}

[/PHP]

4. my output on a logger :

[22-11-07 03:39:14] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:14] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:14] get subject lists
[22-11-07 03:39:14] insert subject's text
[22-11-07 03:39:21] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:21] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:21] insert subject's text
[22-11-07 03:39:21] get subject lists
[22-11-07 03:39:22] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:22] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:22] get subject lists
[22-11-07 03:39:22] insert subject's text
[22-11-07 03:39:22] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:22] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:23] insert subject's text
[22-11-07 03:39:23] get subject lists
[22-11-07 03:39:33] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:33] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:33] insert subject's text
[22-11-07 03:39:33] get subject lists
[22-11-07 03:39:34] F_CALL IS SET for GETSUBJECTLIST
[22-11-07 03:39:34] F_CALL IS SET for INSERTNEWTEXT
[22-11-07 03:39:34] insert subject's text
[22-11-07 03:39:34] get subject lists

[adrive]

anyone? or perhaps this might be due to multi request calls?

[acoder]

If you want this in sequence, you will have to wait until the first request is complete before making the second request.

[adrive]

If you want this in sequence, you will have to wait until the first request is complete before making the second request.

hi, how do i check if the first request was completed?

[acoder]

hi, how do i check if the first request was completed?

When readyState is 4. You could make the second request in the onreadystatechange-called function when the first request's readyState is 4.

[adrive]

thanks acoder, it now works :)

[acoder]

You're welcome. Glad you got it working.