My Ajax call isn't working - Trying to populate jstree via ajax php & mysql JSON

Question

Javascript:

$('#jstree1').jstree({ 'core' : {
        // I usually configure the plugin that handles the data first
        // This example uses JSON as it is most common
        "json_data" : {
            // This tree is ajax enabled - as this is most common, and maybe a bit more complex
            // All the options are almost the same as jQuery's AJAX (read the docs)
            "ajax" : {
                // the URL to fetch the data
                "type" : "POST",
                "url" : "./ajax/get_page_data.php",
                "dataType": "JSON",
                "contentType": "application/json;",
                "data":
                "d_id="+<?=$DOC['d_id']?>,
                "success" : function (data) {
                    // 'data' is a JSON object which we can access directly.
                    // Evaluate the data.success member and do something appropriate...
                    alert(data);
                    if (data.success == true){
                        $('#section1').html(data);
                    } else {
                        $('#section2').html(data);
                    }
                },
                "error": function (error) {
                      alert('error; ' + eval(error));
                }               
            }
        }
} });

And below is my output from get_page_data.php it's not quite working:

[{"id":"ajson12","parent":"#","text":"Welcome"},{"id":"ajson13","parent":"#","text":"Getting to Us"},{"id":"ajson14","parent":"13","text":"About Us"},{"id":"ajson15","parent":"13","text":"Visit Us"},{"id":"ajson16","parent":"13","text":"Bus Routes"},{"id":"ajson17","parent":"#","text":"Choices"},{"id":"ajson18","parent":"#","text":"Guidance"},{"id":"ajson19","parent":"#","text":"Facilities"}]

When testing some JSON data manually the below will work:

$('#jstree1').jstree({ 'core' : {
    'data' : [{"id":"ajson12","parent":"#","text":"Welcome"},{"id":"ajson13","parent":"#","text":"Getting to Us"},{"id":"ajson14","parent":"13","text":"About Us"},{"id":"ajson15","parent":"13","text":"Visit Us"},{"id":"ajson16","parent":"13","text":"Bus Routes"},{"id":"ajson17","parent":"#","text":"Choices"},{"id":"ajson18","parent":"#","text":"Guidance"},{"id":"ajson19","parent":"#","text":"Facilities"}]
} });

I have looked all over the net and cannot find a perfect example of populating a jsTree via ajax using PHP array / mysql fed and outputted as Json.

Answer 1

Try this:

 $('#jstree1').jstree({
            'core': {
                'data': {
                    'url': "./ajax/get_page_data.php",
                    'type': 'POST',
                    'dataType': 'JSON',
                    'contentType':'application/json',
                    'data': function (node) {
                        return { 'd_id': <?=$DOC['d_id']?>};
                    }
                }
            }
        });

I'm not sure that you'd be able to hookup custom .success and .error functions to jstree.