jsTree search not working: Uncaught TypeError: Cannot read property '3' of undefined

At one point I had this working, then as I updated the code to add other features, somehow the search function broke. I've tried looking everywhere and I'm out of ideas. Any ideas?

Here's my code:

<!-- jsTree -->
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/jquery.jstree.js"></script>

<div id="description">
    <div id="mmenu" style="height:30px; overflow:auto;">
        <input type="button" class="button_tasklist" id="add_folder" value="Add Unit" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="add_default" value="Add Task" style="display:block; float:left;"/>
        <!-- <input type="button" class="button_tasklist" id="rename" value="Rename" style="display:block; float:left;"/> -->
        <input type="button" class="button_tasklist" id="remove" value="Remove" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="cut" value="Cut" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="copy" value="Copy" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="paste" value="Paste" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="clear_search" value="Clear" style="display:block; float:right;"/>
        <input type="button" class="button_tasklist" id="search" value="Search" style="display:block; float:right;"/>
        <input type="text" id="search_text" value="" style="display:block; float:right;" />
    </div>
</div>

<!-- the tree container (notice NOT an UL node) -->
<div id="demo" class="demo" style="min-height: 400px; overflow-y:visible; overflow-x:scroll"></div>

    <!-- JavaScript neccessary for the tree -->
    <script type="text/javascript">
        $(function () {

        $("#demo")
            .bind("loaded.jstree", function (e, data) {
                    data.inst.open_all(-1); // -1 opens all nodes in the container
                })
            .jstree({ 

                // List of active plugins
                "plugins" : [ 
                    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu" 
                ],

                // 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
                        "url" : "server.php",
                        // the `data` function is executed in the instance's scope
                        // the parameter is the node being loaded 
                        // (may be -1, 0, or undefined when loading the root nodes)
                        "data" : function (n) { 
                            // the result is fed to the AJAX request `data` option
                            return { 
                                "operation" : "get_children", 
                                "id" : n.attr ? n.attr("id").replace("node_","") : 1 
                            }; 
                        }
                    }
                },
                // Configuring the search plugin
                "search" : {
                    "case_insensitive" : true,

                    // As this has been a common question - async search
                    // Same as above - the `ajax` config option is actually jQuery's AJAX object
                    "ajax" : {
                        "url" : "server.php",
                        // You get the search string as a parameter
                        "data" : function (str) {
                            return { 
                                "operation" : "search", 
                                "search_str" : str 
                            }; 
                        }
                    }
                },
                // Using types - most of the time this is an overkill
                // read the docs carefully to decide whether you need types
                "types" : {
                    // I set both options to -2, as I do not need depth and children count checking
                    // Those two checks may slow jstree a lot, so use only when needed
                    "max_depth" : 3,
                    "max_children" : -2,
                    // I want only `drive` nodes to be root nodes 
                    // This will prevent moving or creating any other type as a root node
                    "valid_children" : [ "drive" ],
                    "types" : {
                        // The default type
                        "default" : {
                            // I want this type to have no children (so only leaf nodes)
                            // In my case - those are files
                            "valid_children" : "none",
                            // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                            "icon" : {
                                "image" : "file.png"
                            }
                        },
                        // The `folder` type
                        "folder" : {
                            // can have files and other folders inside of it, but NOT `drive` nodes
                            "valid_children" : [ "default" ],
                            "icon" : {
                                "image" : "folder.png"
                            }
                        },
                        // The `drive` nodes 
                        "drive" : {
                            // can have files and folders inside, but NOT other `drive` nodes
                            "valid_children" : [ "folder" ],
                            "icon" : {
                                "image" : "root.png"
                            },
                            // those prevent the functions with the same name to be used on `drive` nodes
                            // internally the `before` event is used
                            "start_drag" : false,
                            "move_node" : false,
                            "delete_node" : false,
                            "remove" : false
                        }
                    }
                },
                // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

                // the UI plugin - it handles selecting/deselecting/hovering nodes
                "ui" : {
                    // this makes the node with ID node_2 selected onload
                    "initially_select" : [ "node_2" ]
                },
                // the core plugin - not many options here
                "core" : { 
                    // just open those two nodes up
                    // as this is an AJAX enabled tree, both will be downloaded from the server
                    //"initially_open" : [ "node_2" , "node_3" ],
                    "strings" : { "new_node" : "Type task/unit title..." } 
                }
            })
            .bind("create.jstree", function (e, data) {
                $.post(
                    "server.php", 
                    { 
                        "operation" : "create_node", 
                        "id" : data.rslt.parent.attr("id").replace("node_",""), 
                        "position" : data.rslt.position,
                        "title" : data.rslt.name,
                        "type" : data.rslt.obj.attr("rel")
                    }, 
                    function (r) {
                        if(r.status) {
                            $(data.rslt.obj).attr("id", "node_" + r.id);
                        }
                        else {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("search.jstree", function (e, data) {
                alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
            })
            .bind("remove.jstree", function (e, data) {
                data.rslt.obj.each(function () {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "server.php",
                        data : { 
                            "operation" : "remove_node", 
                            "id" : this.id.replace("node_","")
                        }, 
                        success : function (r) {
                            if(!r.status) {
                                data.inst.refresh();
                            }
                        }
                    });
                });
            })
            .bind("rename.jstree", function (e, data) {
                $.post(
                    "server.php", 
                    { 
                        "operation" : "rename_node", 
                        "id" : data.rslt.obj.attr("id").replace("node_",""),
                        "title" : data.rslt.new_name
                    }, 
                    function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("move_node.jstree", function (e, data) {
                data.rslt.o.each(function (i) {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "server.php",
                        data : { 
                            "operation" : "move_node", 
                            "id" : $(this).attr("id").replace("node_",""), 
                            "ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""), 
                            "position" : data.rslt.cp + i,
                            "title" : data.rslt.name,
                            "copy" : data.rslt.cy ? 1 : 0
                        },
                        success : function (r) {
                            if(!r.status) {
                                $.jstree.rollback(data.rlbk);
                            }
                            else {
                                $(data.rslt.oc).attr("id", "node_" + r.id);
                                if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                    data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                                }
                            }
                            $("#analyze").click();
                        }
                    });
                });
            });
        });

        $("#demo").on("dblclick", "a", function(e) {
            // double-click to add additional info for each node
            var node = $(event.target).closest("li");
            var data = node.data("jstree");
            var idn = $(this).parent().attr("id").split("_")[1];
            // or
            //var id = node[0].id; //id of the selected node

            //alert("Dbl-clicked Node ID: "+idn); //return NodeID   

            showFancybox("edit_task.php?id="+idn);

            // or do something via ajax!
            //$.ajax({
            //  type: "POST",
            //    url: "http://www.google.com",
            //  data: "id="+$(this).parent().get(0).id,
            //  success: function(data){
            //      $("#ajaxcontent").html(data);
            //  }
            //});
        });

        $("#demo").bind("before.jstree", function (e, data) { 
          if(data.func === "remove" && !confirm("Are you sure you want to delete?")) { 
            e.stopImmediatePropagation(); 
            return false; 
          } 
        })
    </script>
    <script type="text/javascript">
        // Code for the menu buttons
        $(function () { 
            $("#mmenu input").click(function () {
                switch(this.id) {
                    case "add_default":
                    case "add_folder":
                        $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
                        break;
                    case "search":
                        $("#demo").jstree("search", document.getElementById("search_text").value);
                        break;
                    case "text": break;
                    default:
                        $("#demo").jstree(this.id);
                        break;
                }
            });
        });
    </script>
</div>

Here's where the error is:

Answers


I'm not quite sure what the problem was, but it seems to have resolved itself and is working again now. I think some other code I had somewhere on the page was conflicting with jsTree? Not sure.


Need Your Help

iphone Addressbook caller blocking

ios7 abaddressbook

Since iOS7 it's possible to block a caller when she/he calls your phone...

TypeError: Result of expression 'localStorage' is not an object

android jquery-mobile

I use jquery wizard in my Android application. So far I can see the wizard effect and all my subpage are distinguish by the tags.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.