CODEWITHSUNDEEP
javascriptjqueryjstree
Steve
Steve

Reputation: 923

jsTree create folder - folder created before name is entered by user

I have a tree.

I can create a folder.

However, there is a problem in doing so. This problem also exists in the filebrowser demo included in the jsTree download.

This is a user experience problem so I hope I can describe it well enough.

1) the user clicks on the node/folder where they want the new folder to be created.

2) they select "New->Folder" from the context menu.

3) at this time, in the background, jsTree triggers the "create_node.jstree" event with the default name "New node". create_node.jstree event does an ajax get back to the web api and a folder is created on the file system.

4) HOWEVER, on the page the user is looking at a field that is prompting the user to enter the custom name of the node/folder.

5) once the user enters a name the node on the page is updated but jsTree doesn't call the back end again to rename the folder.

The result is a node named " and a folder on the file system called "new node".

What would be more appropriate:

Only after the user enters the customer node/folder name does jsTree call for the create_node.jstree event.

This would allow my backend code to execute, troubleshoot, and report success/failure of a folder named as required by the user.

code snips the create_node event

$('#mytree').on('create_node.jstree', function (e, dta) {
        $.get('/<whatever>/FolderBrowser?operation=create_node', { 'type': dta.node.type, 'id': dta.node.parent, 'text': dta.node.text })
            .done(function (d) {
                dta.instance.set_id(dta.node, d.id);
            })
            .fail(function () {
                dta.instance.refresh();
            });
    });

and the tree itself

$('#mytree').jstree(....
, 'contextmenu': {
    'items': function (node) {
        var tmp = $.jstree.defaults.contextmenu.items();
        delete tmp.rename;
        delete tmp.remove;
        delete tmp.ccp;
        tmp.create.label = "New Folder";
        tmp.create.action = function (dta) {
            // I have $10 for you if you can comprehensively explane everything going on in the following.
            var inst = $.jstree.reference(dta.reference)
            var obj = inst.get_node(dta.reference);
            inst.create_node(obj, { type: "default" }, "last", function (new_node) {
                setTimeout(function () { inst.edit(new_node); }, 0);
            });
        }
        return tmp;
    }

    , 'check_callback': function (o, n, p, i, m) {
        if (m && m.dnd && (m.pos !== 'i'))
            return false;
        /* not allowed options for this application
        if(o === "move_node" || o === "copy_node") {
            if(this.get_node(n).parent === this.get_node(p).id) { return false; }
        }
        */
        return true;
    }

Upvotes: 1

Views: 1809

Answers (1)

Steve
Steve

Reputation: 923

jsTree work pretty much as you describe it.

1) Calls the back end to actually create the folder by the default name. At that point you can send success/fail returned to the page.

2) On success, calls the back end again to rename the folder to the user's desired name. At this point you can again send success/fail.

Your code doesn't include facility to rename as required. Add the rename_node.jstree event to your code. And other bits as necessary.

However, per the remark in your code, you don't have to include the 'rename' as a context menu option.

Upvotes: 0

Related Questions