jQuery return $.get data in a function

Question

Hello, I'm trying to call a function that contains jQuery code. I want this function to return the results of the jQuery statement. It is not working and I'm trying to figure out why.

function showGetResult (name) {
  var scriptURL = "somefile.php?name=" + name;
  return $.get(scriptURL, {}, function(data) { return data; });
}

alert (showGetResult("John"));

The alert displays "[object XMLHttpRequest]." However, if I run the jQuery statement by itself, outside of a function, it works fine -> $.get(scriptURL, {}, function(data) { alert(data); })

I'd like to be able to re-use this code by putting it inside of a function that returns the $.get data. What fundamental mistake am I making here?

Answer 1

This is the wrong way to do. The function(data) is a call back function so whenever return $.get will execute .. there is possibility that call back function would have not been called.

Better you call your post data get function from function(data) method.

Answer 2

The fundamental mistake you are making is that the AJAX call is made asynchronously, so by the time you return, the result is not yet ready. To make this work you could modify your code like this:

$(function() {
    showGetResult('John');
});

function showGetResult (name) {
    $.get('somefile.php', { 
        // Pass the name parameter in the data hash so that it gets properly
        // url encoded instead of concatenating it to the url.
        name: name 
    }, function(data) { 
        alert(data); 
    });
}

Answer 3

You have a few different mistakes.

First, $.get doesn't return the return value of the callback function. As you can see it returns the XHR object. Second, the get function isn't synchronous, it's asynchronous so showGetResult will likely return before get completes. Third, you can't return something from inside the callback to the outer scope. You can, however, bind a variable in the outer scope and set it in the callback.

To get the functionality that you want, you'll need to use $.ajax and set the async option to false. Then you can define a variable in the outer scope and assign it in the ajax callback, returning this variable from the function.

function showGetResult( name )
{
     var result = null;
     var scriptUrl = "somefile.php?name=" + name;
     $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
     });
     return result;
}

You would probably be better served, though, figuring out how to do what you want in the callback function itself rather than changing from asynchronous to synchronous calls.

Answer 4

The fundamental mistake is the "asynchronous" part of AJAX. Because you don't know how long the server will take to send back a response, AJAX methods never "block" -- that is, you don't call out to the server and just sit there waiting for the result. Instead, you go on to something else, but you set up a method, called the "callback", that will fire when the results come back. This method is responsible for doing whatever needs to be done with the data (e.g. injecting it into the page).

Answer 5

Looks like you want synchronous request: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req

Or, you may want to pass callback to your function:

function showGetResult (name, callback) {
  var scriptURL = "somefile.php?name=" + name;
  return $.get(scriptURL, {}, callback);
}

showGetResult("John", function(data){ alert(data); });