How to return data to caller's original function in Javascript?

Question

I have a problem with returning data back to the function I want to return to. Code below:

function ioServer(request_data, callback) { $.ajax({ cache: false, data: "request=" + request_data, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){}, success: function(response_data, textStatus){ callback(response_data); }, timeout: 5000, type: "POST", url: "/portal/index.php/async" }); } function processRequest(command, item, properties) { var request = {}; request.command = command; request.item = item; request.properties = properties; var toServer = JSON.stringify(request); var id = ioServer(toServer, processResponse); return id; } function processResponse(fromServer) { if (fromServer.response == 1) { return fromServer.id; } } 

I call this part of the code by calling the processRequest function inside another function. Sending a request and receiving a response work very well. However, I need to return the "id" value from the response back to the processRequest function so that it, in turn, can return this value to its caller. As far as I can follow, the return in processResponse goes back to $ .ajax, but I need it to go back to processRequest.

The BTW if statement in processResponse refers to the value set by the server-side PHP script to indicate whether the request is allowed (for example, if the user has not been registered, fromServer.response will be 0). It has nothing to do with the success / error procedures of the $ .ajax object.

Thank you for help.

@Jani: Thanks for the answer, but could you clarify a little more? A function that requires an 'id' has the following code:

 $(#tabs).tabs('add', '#tab-' + id, 'New tab'); 

You want to say that I should try to execute this part of the code in the processResponse function? Because this is not what I wanted to do; these functions are intended for a universal solution to support the state server part. That is why I did not post this piece of code.

Answer 1

Since Tony has not provided any comments, let me add details about what he offers.

As you know, the processRequest function ends as soon as the $ .ajax call is called, because the $ .ajax method is asynchronous. So, how would you notify the caller of the processRequest that the task is complete?

Simple, you ask the calling processRequest object to provide a callback function. ProcessRequest will call this function whenever it receives ajax output. In Tony code, this is the last argument to the processRequest function.

So your calling code will now look like

 function tabMethod() { processRequest('command', 'item', 'properties', function(id) { if(id == null) { alert('There is a problem!'); return; } $('#tabs').tabs('add', '#tab-' + id, 'New tab'); }); }; 

Answer 2

I think maybe this is closer to what you are looking for ...

 function ioServer(request_data, callback) { $.ajax({ cache: false, data: "request=" + request_data, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){}, success: function(response_data, textStatus){ processResponse(response_data, callback); }, timeout: 5000, type: "POST", url: "/portal/index.php/async" }); } function processRequest(command, item, properties, callback) { var request = {}; request.command = command; request.item = item; request.properties = properties; var toServer = JSON.stringify(request); ioServer(toServer, callback); } //internal callback to handle response code function processResponse(fromServer, callback) { if (fromServer.response == 1) { //call the callback with the id callback(fromServer.id); } else { //You have to remember to call the callback no matter what //or the caller won't know when it complete callback(null); //or some other "didn't get a valid response" value } } 

Answer 3

Since this is an asynchronous request, it does not directly return such a value, and this is not possible.

The way to approach this is to have some method that performs any actions necessary for the selected data, instead of trying to get a return value that will not work.

Answer 4

Awesome! Thanks guys for the help, now it works like a charm. And I learned how to use callbacks better. Here's the full working code:

 createTab('#tabs'); // I'm using JQuery UI to handle tabs function createTab(parent_element){ var name = {}; name.name = "New tab"; var position = {}; position.position = $(parent_element).tabs('length') + 1; var properties = new Array(); properties[0] = name; properties[1] = position; processRequest(1, 1, properties, function(id) { if(id == null) { alert('There is a problem!'); return; } $('#tabs').tabs('add', '#tab-' + id, 'New tab'); }); } function ioServer(request_data, callback) { $.ajax({ cache: false, data: "request=" + request_data, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){}, success: function(response_data, textStatus){ processResponse(response_data, callback); }, timeout: 5000, type: "POST", url: "/portal/index.php/async" }); } function processRequest(command, item, properties, callback) { var request = {}; request.command = command; request.item = item; request.properties = properties; var toServer = JSON.stringify(request); ioServer(toServer, callback); } //internal callback to handle response code function processResponse(fromServer, callback) { if (fromServer.response == 1) { //call the callback with the id callback(fromServer.id); } else { //You have to remember to call the callback no matter what //or the caller won't know when it complete callback(null); //or some other "didn't get a valid response" value } } 

And adds a new tab at the end of the list on the page. Now it is also stored on a server with PHP and MySQL, just like me.

Thanks again!

Answer 5

Instead of injecting a lock to simulate a synchronous call, such as a previously published one, just make the AJAX call itself synchronous and update your success wrapper:

 function ioServer(request_data, callback) { var response = null; $.ajax({ cache: false, data: "request=" + request_data, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){}, success: function(response_data, textStatus) { response = callback(response_data); }, timeout: 5000, type: "POST", url: "/portal/index.php/async", async: false }); return response; } 

Edit: although this is useful, it is sorting against the grain of “normal” AJAX use. Instead, I would suggest changing your approach.