Hi there Ladies and Gents.

I'm very new to ajax (this is my first script) and I almost have it working.

When I call the function image_move_up() or image_move_down(), please see below, normally everything works fine. Firstly the php script gets run and this edits the image order in the database. The the image_list() function gets called and re-generates the list of images from another php call.

However, sometimes, the image_list() either doesn't get called, or doesn't work, I'm not sure what.

However if I delay the image_list() call everything works every time. Does anyone have any ideas?

I delay the function call like so

function image_move_up(id)
{
	write("ajax.php", "action=image_move_up&id=" + id);
	document.getElementById("project_images").innerHTML = "<li>loading</li>";
	setTimeout(function(){image_list();}, 100);
}

Thank you in advance!!!

This is my original code (the one that sometimes does not update)

function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}

// *************************************************************************************************

function write(url, content)
{ 
	var xhr = createXHR();
	xhr.onreadystatechange = function()
	{ 
		if(xhr.readyState == 4)
		{
			// nothing for now
			// alert("sent " + url + " " + content);
		}
	}; 
	xhr.open("POST", url, true);		
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(content); 
}

// *************************************************************************************************

function image_list()
{
	var xhr = createXHR();

	xhr.onreadystatechange = function()
	{ 
		document.getElementById("project_images").innerHTM = "<li>Wait server...</li>";
		if(xhr.readyState == 4)
		{
			if(xhr.status == 200)
			{
				document.getElementById("project_images").innerHTML = xhr.responseText;	
			}	
			else	
			{
				document.getElementById("project_images").innerHTML = "<li>Error</li>";
			}	
		} 
	};
	xhr.open("GET", "ajax.php?action=image_list&id=1", true); 
	xhr.send(null);
}

function image_move_up(id)
{
	write("ajax.php", "action=image_move_up&id=" + id);
	image_list();
}

function image_move_down(id)
{
	write("ajax.php", "action=image_move_down&id=" + id);
	image_list();
}

Yes. I believe in this case, they are being called in succession too quickly than what the script design allows for. I think what is happening is that imagelist() is working properly, but the results of imagelist() is dependent on whether the write() request reaches the PHP server quicker than the imagelist() request. You are using XMLHttpRequest asynchronously which means that even though you are send two requests off nearly simultaneously, there is no guarantee that the first one will finish before the second one.

If that is correct, then there are a few ways you could solve this, one of which is to use a callback on the write() function that calls imagelist() when write()'s AJAX is done.

I believe this could be considered a "race condition".
The way I've been handling problems like this is by firing events in the "success" callback of the ajax connection.

I use YUI, here's an example:

    var callback = 
    {
      success: function (o) {

        events['ajaxMoveNodeSuccess'].fire({response_obj:o, id:id, parent_id:newParentId}); 
      },

      failure: function (o) {

        alert('Failed to move node');

        events['ajaxMoveNodeFailure'].fire({response_obj:o, id:id, parent_id:newParentId}); 
      },

      argument: []
    }

      var transaction = YAHOO.util.Connect.asyncRequest('GET', urlsObj.move(id, newParentId), callback, null);

Anything that is dependent chronologically or in terms of data needed just subscribes to the ajaxMoveNodeSuccess event.

thanks for your replies guys!

i'll have to give this ago over the next few days. fingers crossed it will work, but i'm quite new to this so i'll probably be back :P

tom!