javascriptajaxjstreejstree-dndjstree-search

jsTree ajax parameter not even sending requests


I am copying everything from the docs of jsTree section about mySQL and php.

I've got no clue what could be wrong, I delibratly have changed nothing from the example given, to make sure it is not my fault and still, nothing. I know that it should not function fully, because the links are not real routes on my server, but it still should at least attemt to contact them, but I do not see this communication in my browser (F12->network).

I did try to modify everything with real routes on my server but still, nothing.

The copied HTML and cdn's I used.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>

</head>
<body>
    <div id="mmenu" style="height:30px; overflow:auto;">
        <input type="button" id="add_folder" value="add folder" style="display:block; float:left;">
        <input type="button" id="add_default" value="add file" style="display:block; float:left;">
        <input type="button" id="rename" value="rename" style="display:block; float:left;">
        <input type="button" id="remove" value="remove" style="display:block; float:left;">
        <input type="button" id="cut" value="cut" style="display:block; float:left;">
        <input type="button" id="copy" value="copy" style="display:block; float:left;">
        <input type="button" id="paste" value="paste" style="display:block; float:left;">
        <input type="button" id="clear_search" value="clear" style="display:block; float:right;">
        <input type="button" id="search" value="search" style="display:block; float:right;">
        <input type="text" id="text" value="" style="display:block; float:right;">
    </div>
    <div id="demo"></div>
    <div id="alog" style="border: 1px solid gray; padding: 5px; height: 100px; margin-top: 15px; overflow: auto; font-family: monospace; --darkreader-inline-border-top:#4b5457; --darkreader-inline-border-right:#4b5457; --darkreader-inline-border-bottom:#4b5457; --darkreader-inline-border-left:#4b5457;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left=""></div>
</body>
</html>
<script type="text/javascript">

$("#demo")
    .bind("before.jstree", function (e, data) {
        $("#alog").append(data.func + "<br />");
    })
    .jstree({ 
        // List of active plugins
        "plugins" : [ 
            "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu","ajax" 
        ],
...

The rest of the script is found here under php and mySQL


Solution

  • This works

    $('#demo').jstree({  
            "core": {  
                "check_callback": true,  
                "data": {
                    "url" : "/treeGET",
                    "dataType" : "json" 
                } 
             }
        });