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: "", 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

5

2 Answers

change your code to:

function ChangePurpose(Vid, PurId) { var Success = false; $.ajax({ type: "POST", url: "", 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: "", 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);

18

Try to encapsulate the ajax call into a function and set the async option to false. Note that this option is deprecated since jQuery 1.8.

function foo() { var myajax = $.ajax({ type: "POST", url: "", dataType: "text", data: JSON.stringify({ Vid: Vid, PurpId: PurId }), contentType: "application/json; charset=utf-8", async: false, //add this }); return myajax.responseText;
}

You can do this also:

$.ajax({ type: "POST", url: "", dataType: "text", data: JSON.stringify({ Vid: Vid, PurpId: PurId }), contentType: "application/json; charset=utf-8", async: false, //add this
}).done(function ( data ) { Success = true;
}).fail(function ( data ) { Success = false;
});

You can read more about the jqXHR jQuery Object

1