Jquery Ajax Call, doesn't call Success or Error [duplicate]

Question

Possible Duplicate:
How do I return the response from an asynchronous call?

I am using Jquery Ajax to call a service to update a value.

function ChangePurpose(Vid, PurId) {     var Success = false;     $.ajax({         type: "POST",         url: "CHService.asmx/SavePurpose",         dataType: "text",         data: JSON.stringify({ Vid: Vid, PurpId: PurId }),         contentType: "application/json; charset=utf-8",         success: function (data) {             Success = true;//doesn't go here         },         error: function (textStatus, errorThrown) {             Success = false;//doesn't go here         }      });     //done after here     return Success; } 

and Service:

[WebMethod] public string SavePurpose(int Vid, int PurpId) {     try      {         CHData.UpdatePurpose(Vid, PurpId);         //List<IDName> abc = new List<IDName>();         //abc.Add(new IDName { Name=1, value="Success" });         return "Success";     }     catch (Exception ex)     {         throw new Exception(ex.Message);     } } 

the service is being called Successfully from the AJAX. Value is also being Changed. But after the Service, success: or error: functions are not being called, in this case success should have been called but it is not working.

I used firebug and found that, the success or error functions are being skipped and goes directly to return Success;

Can't seem to find what's the problem with the code.

Update: adding async: false fixed the problem

Answer 1

change your code to:

function ChangePurpose(Vid, PurId) {     var Success = false;     $.ajax({         type: "POST",         url: "CHService.asmx/SavePurpose",         dataType: "text",         async: false,         data: JSON.stringify({ Vid: Vid, PurpId: PurId }),         contentType: "application/json; charset=utf-8",         success: function (data) {             Success = true;         },         error: function (textStatus, errorThrown) {             Success = false;         }     });     //done after here     return Success; }  

You can only return the values from a synchronous function. Otherwise you will have to make a callback.

So I just added async:false, to your ajax call

Update:

jquery ajax calls are asynchronous by default. So success & error functions will be called when the ajax load is complete. But your return statement will be executed just after the ajax call is started.

A better approach will be:

     // callbackfn is the pointer to any function that needs to be called      function ChangePurpose(Vid, PurId, callbackfn) {         var Success = false;         $.ajax({             type: "POST",             url: "CHService.asmx/SavePurpose",             dataType: "text",             data: JSON.stringify({ Vid: Vid, PurpId: PurId }),             contentType: "application/json; charset=utf-8",             success: function (data) {                 callbackfn(data)             },             error: function (textStatus, errorThrown) {                 callbackfn("Error getting the data")             }         });      }        function Callback(data)      {         alert(data);      } 

and call the ajax as:

 // Callback is the callback-function that needs to be called when asynchronous call is complete  ChangePurpose(Vid, PurId, Callback);