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*/

}