Ajax success function

Question

I am using an Ajax post to submit form data to the server, be validated and then return a message based on whether or not the data was valid and could be stored. My success function in my ajax post doesn't run though. Here is the ajax post and the displaying of the success message:

jQuery.ajax({           
    type:"post",
    dataType:"json",
    url: myAjax.ajaxurl,
    data: {action: 'submit_data', info: info},
    success: function(data) {
        successmessage = 'Data was succesfully captured';
    }
});

$("label#successmessage").text(successmessage);
$(":input").val('');
return false;

No message gets displayed on the label though. I tried setting the successmessage variable to a set value in the code and it displayed fine, so there must be something wrong with my success function, I just can't see what? I also tried setting the error callback like this:

error: function(data) {             
    successmessage = 'Error';
},

But still no message gets displayed.

Answer 1

It is because Ajax is asynchronous, the success or the error function will be called later, when the server answer the client. So, just move parts depending on the result into your success function like that :

jQuery.ajax({

            type:"post",
            dataType:"json",
            url: myAjax.ajaxurl,
            data: {action: 'submit_data', info: info},
            success: function(data) {
                successmessage = 'Data was succesfully captured';
                $("label#successmessage").text(successmessage);
            },
            error: function(data) {
                successmessage = 'Error';
                $("label#successmessage").text(successmessage);
            },
        });

        $(":input").val('');
        return false;