CODEWITHSUNDEEP
jqueryjstree
deltaforce
deltaforce

Reputation: 534

How to edit a jsTree node and get the new name?

I have a JS-Tree in which I want to add nodes. After adding the node, I want it to be given a name by the user. I want to make an AJAX call using this name. But my code is not working as expected. What am I doing wrong ?

tree.on('rename_node.jstree', function(e, data) {
  directory_name = data.text;
})

function createFolder($node) {
  $node = tree.jstree('create_node', $node, { li_attr: { "type": "folder" }});
  tree.jstree('edit', $node);
  $.ajax({
    type: "POST",
    url: new_folder,
    data: {
      'directory_name' : directory_name
    },
    success: function(message) {
      toastr.success(message);
    },
  });
}

Upvotes: 1

Views: 5279

Answers (1)

Jeremiah Tws
Jeremiah Tws

Reputation: 161

Here is the code I found and improved on jsfiddle.net to create, edit and get the new name based on the answer from jsTree Get new node AFTER node is created:

$('#jstree').jstree({
"core" : {
    "check_callback" : true,
    "data" : ["Root"]
 }
});

$('#jstree').on('rename_node.jstree', function (e, data) {
  //data.text is the new name:
  console.log(data.text);
  //MAKE AJAX CALL HERE
});

$('button').click(function () {
     $("#jstree").jstree("create_node", null, null, "last", function (node) {
        this.edit(node);
    });
});

Link: http://jsfiddle.net/DGAF4/5244/

Upvotes: 7

Related Questions