Question

I have a strange issue in JQuery AJAX..

My Steps sequence are as follows:

1) I have a JS Function which I am calling on Button Click Event:

 function Click()
 {

    //I am performing some Validations then making an AJAX Request:

   $.ajax({
      type: "POST", 
      url: url, 
      context: window, 
      data: datatoPost,
      contentLength: contentLength, 
      async: true, 
      success: function (response) { 
          callbackFn(response); 
       },
      error: function (msg) { 
          this.error = msg;
       }
    });

   // The callback function is called on Successfull AJAX Request 
   // i.e. callbackFn (See below)

   // I am then checking the window.IsValid which I have set in below function;

   if (window.IsValid == true) {
           // Then Perform another AJAX Request
     }
     else {
         // do nothing
     }
  }


  function callbackFn(response)
  {
     if(response == 'Valid')
     {
         window.IsValid = true;
     }
     else 
     {
         window.IsValid = false;
     }
  }

2) Now, The Problem is while server is processing the First AJAX Request then the code written after that i.e.
if (window.IsValid == true) {
// Then Perform another AJAX Request
}
else {
// do nothing
}
}
is executed

3) I get window.IsValid = false as first AJAX Request’s callback function i.e. callbackFn(response) is not called yet and Even after a Valid response of first AJAX request my second ajax request is not getting executed as window.IsValid variable is not still got set in callback function as callback is not called yet due to server is processing the request.

Please help me I am stuck..

Answer 1

you should then use

async: false,

in you ajax function call. Which is not recomended. The better thing will be to use

if (window.IsValid == true) {
           // Then Perform another AJAX Request
     }
     else {
         // do nothing
     }
  }

within your callback function.