Multiple AJAX requests at the same time not working properly

[Stephan Needank]

Hello,

I'm encountering an AJAX problem when I try to execute multiple AJAX requests at the same time. What I want to do is delete a message and display the status (succes or failure) of that in div1, and refresh the messages on the page in div2. This needs (for as far as my knowledge reaches) two AJAX actions from which I both need the responseText.

The problem
What happens when I execute my script is that the second action (refresh a part of the page) happens before the deletion is executed. The result of this is that when the deletion has been executed, the page is already updated, and the deleted message is still there.

The script
What I now have is:

[code=javascript]
function doAjax(url, element_id, img_url)
{
var ajaxObject = createAjaxObjec t();
ajaxObject.open ('GET', url, true);
ajaxObject.onre adystatechange = function()
{
if(ajaxObject.r eadyState==4 && ajaxObject.stat us==200)
{
document.getEle mentById(elemen t_id).innerHTML = ajaxObject.resp onseText;
delete ajaxObject;
}
else
{
if(img_url)
document.getEle mentById(elemen t_id).innerHTML = '<img src="' + img_url + '" alt=""/>';
}
};
ajaxObject.send ();
}
[/code]
to execute the actions, and
[code=javascript]
function createAjaxObjec t()
{
var ajaxObject;

try
{
ajaxObject = new XMLHttpRequest( );
}
catch (e)
{
try
{
ajaxObject = new ActiveXObject(" Microsoft.XMLHT TP");
}
catch (e)
{
try
{
ajaxObject = new ActiveXObject(" Msxml2.XMLHTTP" );
}
catch (e)
{
return;
}
}
}

return ajaxObject;
}
[/code]
to create the AJAX object.

[Dormilich]

first some note on the code, block 2 line 23, you’ll need to throw an error, as returning undefined kills your script later. use try…catch in doAjax().

I’m not sure why you need 2 AJAX requests, you should be able to do that with a single on. the request deals with the same subject, and you can use Response headers to get back the success status.

[Stephan Needank]

Thank you for notifying me of that! That's something I didn't think of. I'll certainly rewrite that line 23.

I'm trying to work with two AJAX requests, because I don't know another way to handle it in AJAX. I'm a moderate to advanced PHPer, but I'm not exactly what you can call an advanced AJAXer. In PHP I use two seperate files to complete this action: one to delete the message (let's call it delete_message. php) and one to retrieve and display the messages on the page (let's call it display_message s.php).

Do you mean I can achieve the same result just by modifying my Javascript, or are you talking about modifying my PHP scripts?

[Dormilich]

What I want to do is delete a message and display the status (succes or failure) of that in div1, and refresh the messages on the page in div2.

starting from there, I don’t see a reason to use AJAX for refreshing div2. what you do is that you want to remove a certain message (say, a message with a message id). to delete this specific message, just delete its container:

<p id="msg0815">content of message 0815</p>

// get the container
var msg = document.getElementById("msg0815");
// delete the container
msg.parentNode.removeChild(msg);

what you need to know is whether you can safely do that or, whether the server side action was successful.
this is a regular AJAX request to delete_message. php whicht needs to return true or false (e.g. the numbers 1 or 0).
in your readystatechang e function you test for these values and trigger the client-side deletion function on success.

[Stephan Needank]

Thanks a thousand times! That's a great solution, and it works. New code:

[CODE=javascript]function removeMessage(u rl, target_element_ id, img_url, deletion_elemen t_id)
{
if(doAjax(url, target_element_ id, img_url) == true)
{
var div = document.getEle mentById(deleti on_element_id);
// delete the container
div.parentNode. removeChild(div );
}
}[/CODE]