CODEWITHSUNDEEP
javascriptjquery
Sean Bannister
Sean Bannister

Reputation: 3185

jQuery: How do you perform a callback inside an AJAX call

I have a function with an AJAX call inside it, I need to be able to call the function and it return true if the AJAX request was successful and false if not.

I know the following doesn't work because the returns are out of scope to the exampleFunc()

function exampleFunc() {
  $.ajax({
    url: 'http://example.com/page',
    success: function(data, textStatus, XMLHttpRequest){
      return true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      return false;
    }
  });
}

I Googled for a solution and believe I should be doing a callback but couldn't seems to achieve the desired outcome.

Edit: Te be more specific I require the function to return true or false because my use case currently has me doing :

if (exampleFunc()) { 
  // run this code
}

Upvotes: 0

Views: 125

Answers (5)

Saeed Neamati
Saeed Neamati

Reputation: 35822

Simply pass the function to your exampleFunc() and call it in your ajax success callback.

// you want this function to be run on ajax success.
function sayHello() {
   alert('hello'); 
}

function exampleFunc(callback) {
  $.ajax({
    url: 'http://example.com/page',
    success: function(data, textStatus, XMLHttpRequest){
      if (callback && typeof callback == 'function') {
         callback() // here, you call sayHello, which is passed as parameter
      }
      return true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      return false;
    }
  });
}

exampleFun(sayHello); // start ajax

Upvotes: 1

Abdul Munim
Abdul Munim

Reputation: 19217

$.ajax is an asynchronous call which will have a callback handler on success/error response. To work around, you need to pass a callback.

function exampleFunc(callback, errorCallback) {
  $.ajax({
    url: 'http://example.com/page',
    success: callback,
    error: errorCallback
  });
}

USAGE

exampleFunc(function(data, textStatus, XMLHttpRequest) {
      // do whatever you want, you have got a success response
      //return true;
    }, function (XMLHttpRequest, textStatus, errorThrown) {
      // error occured, show some red error box
      //return false;
    });

Upvotes: 0

Jakub Konecki
Jakub Konecki

Reputation: 46008

function exampleFunc() {
  $.ajax({
    url: 'http://example.com/page',
    async: false,
    success: function(data, textStatus, XMLHttpRequest){
      return true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      return false;
    }
  });
}

Notice async: false

Upvotes: 0

Niels
Niels

Reputation: 49919

This can only be done if you got a sync function like:

function exampleFunc() {
  var success;
  $.ajax({
    async : false,
    url: 'http://example.com/page',
    success: function(data, textStatus, XMLHttpRequest){
      success= true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      success= false;
    }
  });
  return success;
}

What you can do is pass a function to your function. Something like:

var hello = "Hello World";
exampleFunc(function(){
    alert(hello); // Alerts Hello World on success
},
function(){
    alert("FAILED"); // Alerts FAILED on error
});

And the function will look like:

function exampleFunc(success, error) {
  $.ajax({
    url: 'http://example.com/page',
    success: success,
    error: error
  });
}

But you can't change the hello var inside the function and use it after the function call. Because the call's keep async.

Upvotes: -1

Quentin
Quentin

Reputation: 943569

You can't return from something asynchronous. The callback function has to do what you want to do in a forwards direction.

Upvotes: 2

Related Questions