3

A javascript error indicating that this.rename(obj) is not defined when selecting to rename a node.

JavaScript runtime error: Object doesn't support property or method 'rename' 

$(document).ready(function () {
        $('#marketing-category-tree').jstree({
            themes: {
                theme: "default",
                dots: true,
                icons: true
            },
            contextmenu: {
                items: {
                    "rename" : {
                        "label": "Rename",
                        "action": function (obj) { this.rename(obj); }
                    }
                }
            },
            plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
        })
        .bind("rename.jstree", function (e, data) {
            debugger;
            alert("RENAMING!!!");
        });
});

I have also tried the following code and am able to select and do a rename but cannot capture the change event.

$('#marketing-category-tree').jstree({
    themes: {
        theme: "default",
        dots: true,
        icons: true
    },
    plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
    alert("RENAMING!!!");
});
kechol
  • 1,554
  • 2
  • 9
  • 18
user2379092
  • 31
  • 4
  • 2
    I was able to get the default menu items to work (i.e. create, delete, rename) by changing the bind parameter from "rename.jstree" to "rename_node.jstree". This stuff is not well documented as suggested by Darin Dimitrov. However, when attempting to customize using documented examples the default function "this.rename" is not recognized. – user2379092 Sep 23 '13 at 14:41
  • I've been through the documentation and several blogposts as well as posts here, but couldn't figure this out. I keep receiving the exact same behavior: "this.rename is not a function" when trying to overwrite the exisiting ones. I couldn't find a way to get rid of unused entries in the context-menu (I only need rename and delete). – Select0r Sep 15 '14 at 13:15

3 Answers3

4

I think the method you are looking for is edit. But first you have to get the node of the tree. Try to use this code below:

...
"contextmenu" : {
  "items" : renameItem : { // The "rename" menu item
              label : "Rename",
              action : function (obj) {
              n = $('#marketing-category-tree').jstree(true).get_node(obj.reference); //get node
              $('#marketing-category-tree').jstree(true).edit(n); //puts the node into edit mode
              }
            }
  }
...

HTH

oerl
  • 1,204
  • 14
  • 16
  • 1
    So putting an item into "edit"-mode will call the rename_node-function after the rename is done? Why is it that I need to call "$('#jstree').jstree(true).edit(node);" and "this." won't work here? (this.rename is found in every single tutorial for this, but just doesn't work) I've managed to get "rename" to work using your code (BTW: there's a "{" missing after '"items" : '). – Select0r Sep 15 '14 at 14:26
  • 1
    I found "delete_node" to be the function to get this to work to remove an item. Still confused here. Why do I need to use "edit", which forwards to ".on('rename_node.jstree', function (e, data) {" and why does "delete_node" (forwarding to "$('#jstree').jstree(true).delete_node(node);") work, instead of just "delete"? I think most of the confusion here comes from missing consistency in the naming of methods. – Select0r Sep 15 '14 at 14:32
  • 1
    Where have you found that it should work with this.delete? I recommend to stick with the jsTree API description: http://www.jstree.com/api/#. – oerl Sep 16 '14 at 08:06
  • 1
    The API tells me, there's a "delete_node"-method (as well as a "rename_node"-method). The answer to this question (among others) always promotes using this.rename (which just doesn't work): http://stackoverflow.com/questions/8491526/jstree-remove-default-elements-from-context-menu – Select0r Sep 16 '14 at 13:18
  • 1
    The only thing I can think of is that the answer refers to an older version of jsTree and delete a.s.o. is outdated. Do you want to set the node into edit-mode so the user can change it's name or do you want to set the name automatically? – oerl Sep 17 '14 at 06:38
  • The user should change the name after choosing to do so using the contextmenu. I got it to work, using your code, I was just wondering why the tutorial-code wouldn't work. – Select0r Sep 18 '14 at 13:58
  • bounty awarded, even though question was not fully answered, but I got it to work with the hints given – Select0r Sep 22 '14 at 13:51
0

Your first code example ain't gonna work because 

"action": function (obj) { this.rename(obj); }

in this case "this" is a point to Window object the next things is that documentation http://www.jstree.com/api/ doesn't have mentions of method rename and only rename_node

Here is the working example (right click at any node and then click on rename)

http://jsfiddle.net/w9snc6z1/4/

Pay attention that rename_node also not working but according to documentation

set_text: set the text value of a node. Used internally, please use rename_node(obj, val).

it's not recommended to use set_text instead of rename_node.

Nikita
  • 4,576
  • 1
  • 14
  • 11
  • So the code works but should not be used ... :) I managed to build your code into my project, but now the user can't enter the new name, which is what the original method does (and what "edit" should be used for as oerl pointed out). – Select0r Sep 18 '14 at 14:10
0

you should get node of the tree with var tree = $("#marketing-category-tree").jstree(true);then operate on nodes.

u can use this example goodluck :)

sep7696
  • 494
  • 2
  • 16