I need to return from "success" in .ajax function in jQuery

Question

I have a JsTree that gets populated based on the JSON Data that I receive from an AJAX call. Here is the AJAX call.

function sendQuery(){
    $.ajax({
        context: this,
        url: 'http://localhost:8080/testMain',
        type: 'GET',
        dataType: 'text',
        success: function(data) {
                       // ^^^^ Need for sendQuery() to return DATA 
                },
        error:  function (xhr, ajaxOptions, thrownError){    
                    alert('Error xhr : ' + xhr.status);    
                    alert('Error thrown error: ' + thrownError);    
                }
    }); 
}

I am aware that there is a scope problem here. In JavaScript variables are defined as per the declaring function. I just dont know how to return from sendQuery() which I am then using as the parameter to another function which will parse the JSON, which is the parameter for another to stage for the tree. Kinda frustrated with this piece in the clockwork not working out to be as simple as what I am used to in Java. Thanks so much for the help, and if it works then ill definitely accept. Cheers

EDIT #1 : Ok so based on the answers, I believe if I change my code in this fashion it will allow for data to get out of the .ajax function. There remains the question of how to get it back into the flow of the program.

function sendQuery(){
    $.ajax({
        context: this,
        url: 'http://localhost:8080/testMain',
        type: 'GET',
        dataType: 'text',
        success: getJson,
        error:  function (xhr, ajaxOptions, thrownError){    
            alert('Error xhr : ' + xhr.status);    
            alert('Error thrown error: ' + thrownError);    
        }
    }); 
}

function getJson(data){
    alert("Transmission Success.");
    alert(data);
    var obj = $.parseJSON(data);
    alert("Parsing JSON Success.");
    var apples = obj.apples;
    alert(apples);
    return apples;
}

Ok so now how do I get the APPLES variable into the chain of call which will stage the data for the tree?

I need to feed the APPLES variable to a function which will process the data.

EDIT #2 Using a Callback:

Took me a second to wrap my head around the idea of a callback. Here is what I was able to do with it.

Here is my original tree code, it calls a series of functions to do different things but ultimately get the data in the form which the tree will accept.

$(function () {     
    $("#client_tree").jstree({
        "json_data": {"data": attachTree(stageTreeData(getJson(sendQuery())))}, 
        "plugins" : [ "themes", "json_data", "ui" ]
    }).bind("select_node.jstree", function (e, data) { 
        var msg = data.rslt.obj.attr("id");
        alert(msg);
    });
});

I at the moment am trying to get the data via Ajax, in the sendQuery() method then return from it with data etc...]

I changed it slightly, now I dont call sendQuery(), jQuery calls it.

$(function (){
    $.ajax({
        context: this,
        url: 'http://localhost:8080/testMain',
        type: 'GET',
        dataType: 'text',
        success: loadTree,
        error:  function (xhr, ajaxOptions, thrownError){    
            alert('Error xhr : ' + xhr.status);    
            alert('Error thrown error: ' + thrownError);    
        }
    });
});

Also changed my tree loading code a bit...

function loadTree(data){
    $("#client_tree").jstree({
        "json_data": {"data": attachTree(stageTreeData(getJson(data)))},    
        "plugins" : [ "themes", "json_data", "ui" ]
    }).bind("select_node.jstree", function (e, data) { 
        var msg = data.rslt.obj.attr("id");
        alert(msg);
    });

}

I have no errors, no exceptions and the tree is populated.

Thank you all for helping!

EDIT#3 Fixing some minor stuff:

Moved to Alert() call in jQuery not displaying, called from within a JsTree

Answer 1

You need to consume the data within the AJAX success. Can use another function as this code shows

   function sendQuery(){
        $.ajax({
            context: this,
            url: 'http://localhost:8080/testMain',
            type: 'GET',
            dataType: 'text',
            success: loadTree,

            error:  function (xhr, ajaxOptions, thrownError){    
                        alert('Error xhr : ' + xhr.status);    
                        alert('Error thrown error: ' + thrownError);    
                    }
        }); 
    }


function loadTree( data){
   /* do something with data returned from ajax*/

}

Answer 2

The problem with what you're trying to do is that the ajax call is asynchronous. The sendQuery function will return, and control flow will continue, before you've gotten a response from the server.

The way to use it is using callbacks. When you get a response back from the server, the function that you've passed to success() will get called. Basically, you need that function to pick up your processing pipeline where you left off. You want that function to parse the response into json, "stage for the tree", etc.

You'll need to separate the function that calls this into what happens before the call, and then "everything else" that happens after the call comes back. That "everything else" is what you want in the success callback.

Example (making some assumptions about who is calling this function)

function doQueryAndParseData(){  //This is the function that calls doQuery
   prepare_something();
   //You pass this in as a callback, since it can only happen once you have data
   sendQuery(function(data){     
       parsed_data = JSON.parse(data);  //This is where you do your work
       //Put parsed data into dom somehow
   }
   return; //This function will return before the data gets back, but when the server responds the data will get parsed and put into the tree
}

function sendQuery(callback){
    $.ajax({
        context: this,
        url: 'http://localhost:8080/testMain',
        type: 'GET',
        dataType: 'text',
        success: callback,
        error:  function (xhr, ajaxOptions, thrownError){    
                    alert('Error xhr : ' + xhr.status);    
                    alert('Error thrown error: ' + thrownError);    
                }
    }); 
}    

Answer 3

function sendQuery(){
    var val;
    $.ajax({
        context: this,
        url: 'http://localhost:8080/testMain',
        type: 'GET',
        async: false,
        dataType: 'text',
        success: function(data) {
                       val = data;
                },
        error:  function (xhr, ajaxOptions, thrownError){    
                    alert('Error xhr : ' + xhr.status);    
                    alert('Error thrown error: ' + thrownError);    
                }
    }); 
    return val;
}

Answer 4

No, you don't need that.

What you need is to use the data.

But you can't return them from sendQuery, because the call is asynchronous, which means the data are available only after sendQuery has returned.

The solution is to provide your sendQuery function a callback that will do what you want to do with the data when they're available :

function sendQuery(callback){
   ...
   success: callback,
   ...
}

...
sendQuery(function(data){
    // do things with data
});