Question

I have a function runAjax that functions correctly. Unfortunately I am struggling to return the value I get from the ajax query.

The ajax function assigns the returned value inside “contents” or “error” xml tags to the variable “result”.

If I alert the result variable inside the ajax function it alerts the correct value (i.e if the xml value inside contents is “published” it alerts published).

However if I alert the returned value from the runAjax function it alerts an object instead of the value of the internal variable “result” which in the above example is “published”.

function runAjax (data_obj){
  return $.ajax({
      url:"/ajax.php",
      dataType: "xml",
      data: data_obj,
      success: function(data) {
        // format result
        var xml;
        if (typeof data == "string") {
          xml = new ActiveXObject("Microsoft.XMLDOM");
          xml.async = false;
          xml.loadXML(data);
        } else {
          xml = data;
        }
        var result;
        if($("error",xml).text()){
          result = [$("error",xml).text()];
        } else{
          result = [
            $("contents", xml).text()
          ];
        }
      alert(result); //alerts the correct string for example "published"
      return result;
      }
    });
  }
  $('ul.content li span.changeable').click(function(e){
    e.preventDefault();
    var method_set = $(this).parent().attr("class");
    var id_set = $(this).parent().parent().find('li.id span').html();
    var user = $(this);
    var result = runAjax({method: method_set, id: id_set});
    alert(result); //alerts an object not published

  });

Im sure it has something to do with the way I am returning the variable but I can’t figure it out. Any input would be much appreciated.

Regards
Luke

UPDATE:
This is the revised code that works thanks to all the input from people below:

  function runAjax (data_obj,callback){
    $.ajax({
      url:"/ajax.php",
      dataType: "xml",
      data: data_obj,
      success: function(data) {
        // format result
        var xml;
        if (typeof data == "string") {
          xml = new ActiveXObject("Microsoft.XMLDOM");
          xml.async = false;
          xml.loadXML(data);
        } else {
          xml = data;
        }
        var result;
        if($("error",xml).text()){
          result = [$("error",xml).text()];
        } else{
          result = [
          $("contents", xml).text()
          ];
        }
        if ( typeof(callback) == "function") {
          callback(result);
        }
      }
    });
  }
  $('ul.content li span.changeable').click(function(e){
    e.preventDefault();
    var method_set = $(this).parent().attr("class");
    var id_set = $(this).parent().parent().find('li.id span').html();
    var user = $(this);
    runAjax({
      method: method_set, 
      id: id_set
    },
    function(result){
      $(user).html(result.join('')); //this is instead of alert(result);
    }
    );

  });

Answer 1

According to the docs

The $.ajax() function returns the XMLHttpRequest object that it creates.

Any return value that you return from the success callback function is ignored.

You need to put the value in a variable defined in a wider scope than inside the callback function (global, or preferably inside an outer function).

   var result;
   $.ajax({
       ....
       success : function(data) {
          ...
          result = ...;
       }
   });

Or better yet: do whatever you want to do with the return value inside the success callback function, this will keep the asynchronous nature of the ajax call and means you don’t need to wait for the call to come back.

Doing your processing in the success callback function means you know you have the results, if you put the value in a variable the variable may not be assigned a value yet by the time you want to use it.

In a comment to another answer on this page you say:

however I am calling the runAjax function from multiple other functions not just the one in my code example above, so I need the value returned rather than the runAjax function doing the html replacing

I would add an extra parameter to your runAjax function, which is another callback function that you can pass in different processing functions from the various functions.

function runAjax(data_obj, callback) {
    $.ajax({
        ...
        success : function(data) { 
            ...
            result = ...
            ...
            if ( typeof(callback) == "function") {
                callback(result);
            }
        }
    });
}

Then you can call it like

runAjax({method: method_set, id: id_set},
    function(result){
         alert(result);
    }
);

Then you can do your generic processing of the data in the success function, but the custom processing for each call in the callback function.

If you really need to wait for the call, you can create a synchronous ajax call by passing the async option:

 $.ajax({
    async:false,
    ....