$(function () { $("#search").click(function () { $("#taxon_tree").jstree("search",$("#search_str").val()); }); $("#taxon_tree") .jstree({ "plugins" : [ "themes", "html_data", "search", "crrm", "contextmenu", "types"], "contextmenu" : { items:{ edit : false, "New" : { // The item label "label" : "New material", // The function to execute upon a click "action" : function (obj) { $.ajax({ type: 'GET', url: "/materials/" + obj.attr("id") +"/new_material", success : function (r) { if(!r.status) { $('#new_material').html(r); } }, error : function (r) { alert("can't be blank"); } }); }, // All below are optional "_disabled" : false, // clicking the item won't do a thing "_class" : "class", // class is applied to the item LI node "separator_before" : false, // Insert a separator before the item "separator_after" : true, // Insert a separator after the item // false or string - if does not contain `/` - used as classname "icon" : false, } } }, "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" : -2, "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 "file" : { // 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" : "/images/rails.png" } }, // The `folder` type "folder" : { // can have files and other folders inside of it, but NOT `drive` nodes "valid_children" : [ "default", "folder" ], "icon" : { "image" : "/images/grid.png" } }, // The `drive` nodes "drive" : { // can have files and folders inside, but NOT other `drive` nodes "valid_children" : [ "default", "folder" ], "icon" : { "image" : "/static/v.1.0rc2/_demo/root.png" }, // those options prevent the functions with the same name to be used on the `drive` type nodes // internally the `before` event is used "start_drag" : false, "move_node" : false, "delete_node" : false, "remove" : false } } }, }) .bind("create.jstree", function (e, data) { $.ajax({ type: 'POST', url: "/taxons", data : { "taxon[name]" : data.rslt.name , "taxon[taxonomy_id]" : data.rslt.parent.attr("name") , "parent" : data.rslt.parent.attr("id") }, success : function (r) { if(!r.status) { data.inst.refresh(); } }, error : function (r) { alert("can't be blank"); } }); }) .bind("rename.jstree", function (e, data) { $.ajax({ type: 'PUT', url: "/taxons/" + data.rslt.obj.attr("id"), data : { "taxon[name]" : data.rslt.new_name }, success : function (r) { if(!r.status) { data.inst.refresh(); } }, error : function (r) { alert("can't be blank"); } }); }) .bind("remove.jstree", function (e, data) { $.ajax({ type: 'DELETE', url: "/taxons/" + data.rslt.obj.attr("id"), success : function (r) { if(!r.status) { data.inst.refresh(); } }, error : function (r) { alert("Something wrong"); } }); }); });