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:
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.