too long

Question

Ok, this is the problem. I have a MySQL form with a drag 'n drop hot spot, and several image tags. The data field is simply a char(100) that stores a link to the uploaded image file. With each image tag I have a button to delete the image. It in turn calls a confirm dialog, and if confirmed calls a javascript function to delete the image. The javascript function calls a separate php file that executes the update to the MySQL table. What I would like to do is refresh the view once all this has been executed. I have searched all over Google, and this site and have tried numerous versions of everything claimed to work. But so far, I have found nothing. I don't want to use a meta tag because I found that that if you are attempting to upload an image invariably it would refresh before you can complete the upload.

As it is, everything works fine, except for the timing to execute a refresh. I'm assuming and logically it would seem that once the php update function has completed that that would be the time to execute a refresh. But so far, I haven't been able to get a javascipt refresh function to work from an external php. It also seems that from the initial javascipt function that it doesn't wait for the php to finish before calling a refresh from there. In other words, like these last few lines:

ajaxRequest.open("GET", "AjaxDeleteImage.php" + queryString, true);
ajaxRequest.send(null);
//window.location.reload(true);

Where you can see I commented out the reload. I tried it there, but it just killed everything. I would be happy to include more code if needed. Maybe my method is too convoluted and someone can give me a swift kick if needed.

Answer 1

AJAX calls are asynchronous so once the request goes out, the rest of the script carries on executing. This is generally a good thing otherwise your page will hang until the AJAX is done.

To carry out an action when the AJAX request is finished, you need to assign a callback function. This will be run when the AJAX is done. Or more accurately when the AJAX request state changes.

I lifted this from W3Schools:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //refresh page here or do other cool stuff
    }
}

In your case you would change xmlhttp to ajaxRequest.

The onreadystatechange property expects a function and this function will be called whenever the state of the AJAX request changes. There are 5 different states, but the one you're interested in is 4 as this is the "I'm done!" state. The function above checks for this state and also checks the http status code returned from the server. If it is 200 life is good and you can then do what you need to do. The callback should be declared before calling .send().

You may also check for other status codes and react accordingly (say pop up an error if there is a 404 or 500 status code, or reset the page to a known good state so the user can try again).

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //refresh page here or do other cool stuff
    }
    elseif (xmlhttp.readyState==4 && xmlhttp.status==500)
    {
        //uh oh, something went wrong. Call Batman!
    }
}

As an aside, libraries such as JQuery wrap up AJAX functionality into some very easy to use functions. A simple JQuery example:

$.get('myurl.php')
.done(function() {
    alert( "success" );
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "complete" );
});

As you can see, you can perform your GET request and define all your handlers in one easy statement. If you only care about success, you can shorten it to just:

$.get('myurl.php', function(){
    alert('success');
});