Can't get my jsTree PHP Json AJAX code to work.

[Michael Davenport]

Hi guys,

I just can't get this to work I am not sure if my Ajax is returning anything at all but here is the response from my php file:

http://www.designjazz.com/clients/ajax/get_page_data.php?d_id=12

[{"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"}]

get_page.data.php code:

Start:
header('Content-Type: application/json');

Middle:
Censored for security but you can see the output above.

End:
echo json_encode($page_data);

Javascript on my page where the jsTree is $DOC['d_id']=12:

<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/jstree.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {

    $('#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...
                        console.log(data);
                        alert(data);
                        if (data.success == true){
                            $('#section1').html(data);
                        } else {
                            $('#section2').html(data);
                        }
                    },
                    "error": function (error) {
                          alert('error; ' + eval(error));
                    }               
                }
               }
    } });

});
</script>

[David Mann]

From the jquery.com page:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

I noticed you're using the success callback with jquery 1.11. Is it possible success() has been removed. Try done() and see if that works.

[Ivan Bozhanov]

Your config is wrong - it is a mix between 1.0 and 3.0. You should have this:

"core" : {
  "data" : {
    "type" : "POST",
    "url" : ....

No need for "json_data" (it is just "data") and no need for the nested "ajax" - simply have your config in "data".

Best regards,
Ivan

[Michael Davenport]

Thanks Ivan,

Here is my working code:

     $('#jstree1').jstree({

        "core": {
            "data": {
                "type": "POST",

                //"dataType": "JSON",
                "url": "./ajax/get_page_data.php",               
                "data": function (node) {
                    return { "d_id": <?=$DOC['d_id']?> };
                }
            }
        },
        "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]   
    });

Also if I comment out the line "type": "POST" it still works. I am having trouble getting the bind move_node to work now :-( Such a noobie. The documentation on jstree .com is not great really.

[Michael Davenport]

Hey David,

success works:

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

                }/*,
                "success" : function (data) {
                    //WORKS
                }*/

            }
        },
        "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]   
    });

[David Mann]

Hi Michael,

Thanks for the clarification. I thought it was worth a mention because the jQuery team may eventually remove it altogether, but Ivan is the guru on this forum!

Best regards,

David

[Deks]

Hi,

am looking for jstree 3.0. php code and sql table structure for my ajax return. Is it possible to see your solution?

Thanks

[Ivan Bozhanov]

Just to chime in - there will be a demo of manipulating a folder structure and a database (probably on Monday) when 3.0.0-final is released (if nothing major comes up). As usual - the demos won't be supported (the focus is the client side), but it will be exactly what you need.

[Deks]

Thanks. Thats all I need. Some working demo  :)