Have JavaScript method return the result of jQuery AJAX call

    |
  • Added:
  • |
  • In: Wordpress

Possible Duplicate:
How to return the response from an AJAX call from a function?

function Run(someJsonObject) { $.ajax({ type: "post", contentType: "application/json; charset=utf-8", url: "/MyWebService", data: JSON.stringify(someJsonObject), dataType: "json", success: function (data) { var parsedJson = jQuery.parseJSON(data.d); // Do some magic... return true; // success! }, error: function (jqXHR, textStatus, errorThrown) { return false; } }); } var result = Run({dummy:'dummy'}); 

If I'm not mistaken, the above function will not return true or false, but rather it will be undefined. I want to return the result of the AJAX call, I'd prefer to make it synchronous (I realize I'm using AJAX). How would I accomplish this?

This Question Has 4 Answeres | Orginal Question | contactmatt

You can simplify

$.post('/MyWebService', JSON.stringify(someJsonObject), function(r) { if(r.success) { // do something (1) } else { // do else something (2) } },'json').error(function() { alert('comunication error'); }); 

If you get any response like this

{ "success": true, data: "my_data" } 

execute something (1) else (2)

If not a valid json or timeout trigger .error()

If you want to make an ajax request in jquery synchronous and have it be the return value of Run:

function Run(someJsonObject) { var returnValue; $.ajax({ type: "post", async: false, contentType: "application/json; charset=utf-8", url: "/MyWebService", data: JSON.stringify(someJsonObject), dataType: "json", success: function (data) { var parsedJson = jQuery.parseJSON(data.d); // Do some magic... returnValue = true; // success! }, error: function (jqXHR, textStatus, errorThrown) { returnValue = false; } }); return returnValue; } 

I added async: false to the ajax options and used a local variable (accessible to the success and error handlers) as the return value.

You can't just return $.ajax(/* snip */) because that returns a promise object.

If you add the async option to your jquery call, it stops being asynchronous.

That being said, this is usually a bad idea and can probably be handled a better way. Usually, this is done by doing your ajax call first and working with your data in your success function.

If you are really adamant about doing it this way, though, this is what you want:

function Run(someJsonObject) { var result; $.ajax({ async: false, type: "post", contentType: "application/json; charset=utf-8", url: "/MyWebService", data: JSON.stringify(someJsonObject), dataType: "json", success: function (data) { var parsedJson = jQuery.parseJSON(data.d); // Do some magic... result = true; // success! }, error: function (jqXHR, textStatus, errorThrown) { result = false; } }); return result; } var result = Run({dummy:'dummy'}); 

You are backwards, let your ajax run first.

$(function () { $.ajax({ type: "post", contentType: "application/json; charset=utf-8", url: "/MyWebService", data: JSON.stringify(someJsonObject), dataType: "json", success: function (data) { var parsedJson = jQuery.parseJSON(data.d); // Do some magic... DoStuffWithResult(data.d); return true; // success! }, error: function (jqXHR, textStatus, errorThrown) { return false; } }); }); function DoStuffWithResult(result){ //time to rock, i have my result } 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top