JQuery submit form and output response or error message

Question

I want to submit form and show message about result. update_records initializes alert_message to error message. If success I expect that its value is changed. Than update_records outputs message. But the function always alerts "Error submitting form". What is wrong with this?

The code follows:

  function update_records(form_name) {
    var options = {
      async: false,
      alert_message: "Error submitting form",
      success: function(message) {
        this.alert_message = message;
      }
    };
    $('#' + form_name).ajaxSubmit(options);
    alert(options.alert_message);
  }

I am newbie in Javascript/JSon/Jquery and I suspect that I misunderstand some basics of mentioned technologies.

UPDATE:

I specified "async:false" to make execution synchronous (Is it correct?)

I also tried to insert delay between following two lines:

$('#' + form_name).ajaxSubmit(options);
pausecomp(1000); // inserted pause
alert(options.alert_message);

It also does not resolve the issue. Code for pousecomp follows:

  function pausecomp(millis)
  {
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
  }

Answer 1

The ajaxSubmit's AJAX call is asynchronous - this means that the AJAX request is made out-of-order of usual program execution, and in your program that means that the alert is called before this.alert_message = message; has an opportunity to execute. The order of execution is:

1. call update_records()
2. make the ajaxSubmit AJAX request, remember to execute the callback function but not now
3. call the alert(options.alert_message)
4. when the ajaxSubit request returns data, execute the callback function (which is to set the this.alert_message variable)

To have the alert show the correct value, move the code that utilises the AJAX return data (the alert()) to the success() function - that what the success function is for.

Answer 2

 $('#' + form_name).ajaxSubmit(options);

As the AJAX acronym suggest this call is asynchronous so your alert(options.alert_message); is called before the success callback is called thats why you always get an alert with error message although an ajax call may complete successfully you could try something like this instead:

 function update_records(form_name) {

    var options = {
      async: false,
      alert_message: "Error submitting form",
      success: function(message) {
        alert(message);
      },
      error : function(){
        alert(this.alert_message);
      }
    };
    $('#' + form_name).ajaxSubmit(options);

  }