How to return value when AJAX request is succeeded

Question

   function ajaxRefresh(actionUrl) {
        $.ajax({
        url: actionUrl,
        success: function() {
             return true;
        }});
        return false;
    }

The function anyway returns false even when a request is succeeded, becouse the request is asynchronous. How I can return true when request is succeeded?

Solution 1

You should set parameter async to false. Try this code:

function ajaxRefresh(actionUrl) {
    var succeed = false;

    $.ajax({
    async: false,
    url: actionUrl,
    success: function() {
         succeed = true;
    }});

    return succeed;
}

Solution 2

You can't return "true" until the ajax requests has not finished because it's asynchron as you mentioned. So the function is leaved before the ajax request has finished.

Solution 1

function ajaxRefresh(actionUrl, successCallback) {
    $.ajax({
       url: actionUrl,
       success: successcallback
    });
}

But there's a workaround: Just add a callback parameter to the function. This function will be executed when the request has finished.

Solution 2

You can return a jquery deferred.

function ajaxRefresh(actionUrl, successCallback) {
    return $.ajax({
       url: actionUrl
    });
}

Now you can use the function like:

function otherFunction()
{
     ajaxRefresh().success(function() {
        //The ajax refresh succeeded!
     }).error(function() {
        //There was an error!
     });
}

For more information about jquery deferreds look at http://www.erichynds.com/jquery/using-deferreds-in-jquery/.

Solution 3

You can refactor your code a little bit so that your success callback triggers the next operation that depends on the true/false result. For example, if you currently have something like:

function main() {
  // some code

  if (ajaxRefresh(url)) {
    // do something
  }
}

You would change that to something like:

function main() {
  // some code

  ajaxRefresh(url);
}

function doSomething(successFlag) {
  if (successFlag) {
    // do something
  }
}

function ajaxRefresh(actionUrl) {
  $.ajax({
         url: actionUrl,
         success: function() {
           doSomething(true); // or false as appropriate
         }});
}

You could also put the if test into the ajax callback function instead of in the doSomething() function. Up to you.

Or you can make a synchronous request, and figure out the ajaxRefresh() function's return value after the request is done. I would not recommend that for most purposes.

Solution 4

I am a relatively newbie at this, but here is a suggested work around I came up with which eliminates the need to set asynch to false or anything like that. Just set a hidden field value with the result of the ajax call, and instead of checking return value, check the value of the hidden field for true/false (or whatever you want to put in it).

Example: function doSomething() {

    $.ajax({
        ...blah blah 
        },
        success: function(results) {
            if(results === 'true') {
                $('#hidField').val('true');
            }
            else {
                $('#hidField').val('false');
            }
        }
    });

Then somewhere else where it's required, this doSomething function is called, and instead of checking the result of the ajax call, look for the hidden field value:

doSomething();

var theResult = $('#hidField').val();

if (theResult == 'true') {

...do whatever...

}

View more solutions

Comments

[nnnnnn]

This should work if you also set the ajax call to be synchronous. Otherwise it will always return false the same as the original code.

[nnnnnn]

Returning true or false (or anything else) from the success and error callback functions isn't going to help because those return values aren't returned to the bit of code that made the $.ajax() call. The success and/or error callback functions need to actually directly call the code that should execute on a true or false value.

[jfriend00]

Eeeck! Async: false will LOCK UP THE BROWSER for the duration of the ajax call. This is often a horrible user experience. The good solution requires refactoring the code to use a callback or a function call from the success/error functions to continue execution of the process and pass on the result of the ajax call.

[Pavel Surmenok]

Yes, you are right. But I've answered exactly to the question. Artur asked how to make the function to return result. Usability issue is beyond the question.

[jfriend00]

I guess everyone has their own answering style on SO. If someone may be going in the wrong direction with their question, I'd like to help them understand that rather than only answer the literal question.