JQuery works too fast?

Question

I'm pretty new to JQuery and there's a tiny issue with my code. I hope either one of you could help me out.

I use an external PHP file to load certain HTML data into my main file. Now there's another external PHP file with updates the very same data. I'm using a JQuery function to check the value of the field I'd like to update, and in case it is not empty I call the update file. Right after I reload the DIV I'm working on and post into it the new data (using the external loading data file).

Now the problem is, I believe my JQuery function /sometimes/ doesn't wait for the updating file to finish and instantly reads the new content from the second file, without waiting for the content to get actually updates. This happens every now and then, but not constantly.

This is my JQuery function:

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() } )
            $("#div_adminMessage").hide();
            $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
            $("#div_adminMessage").fadeIn();
        }
        else{
            alert('do not leave this field blank');
        }
    });

In case you're wondering, the reading file simply prints some HTML code after reading the needed data from my database, and the updating file updates the very same data.

Is there anything wrong with my JQuery code? Because frankly I believe both of my PHP reading&updating files work just fine.

Answer 1

The problem is that post is an asychronous operation, so it will execute and return immediately and while waiting for that request to finish, the load function will be executed.

The right way to do it would be to use a callback:

$.post("/includes/script_files/updateAdminMessage.php", { 
    adminMessage:    $("#adminMessage").val() }, 
    function(){
        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();
})

Answer 2

You can use the callback success function of post to initiate the remaining load:

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, success: function(){
                $("#div_adminMessage").hide();
                $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
                $("#div_adminMessage").fadeIn();
            })
        }
        else{
            alert('do not leave this field blank');
        }
    });

Answer 3

You're right, jQuery.post() isn't a blocking function, however its third parameter is the success function, so you can put whatever you want to happen "after" the post in there:

        $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, function(data,status,xhr){
           $("#div_adminMessage").hide();
           $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
           $("#div_adminMessage").fadeIn(); });

Answer 4

That is what you call a race condition. I assume you have some database in the background, so the first php script and the hide() are racing against each other. Solutions are

1. Add some sleep between post and load
2. Use a success callback , that will wait for post() to finish.

Answer 5

Welcome to the wonderfull world of asynchronous.

This needs to go in to the success callback handler of "post":

$("#div_adminMessage").hide();
$('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
$("#div_adminMessage").fadeIn();


jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

looks like this

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function (data, textStatus, jqXHR) {

        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();

    },
    dataType: dataType
});

etc. probably the "fadeIn" needs to go in the next callback

you may force jQuery to wait/block until the request has been completed, but thats breaking the concept behind AJAX ("A" stands for asynchronous):

...
async: false,
data: ....