Question

I’m trying to let the user create either a file or a folder. So when they right click on the menu the context menu will show:
create =>
file
folder

This part is working, the problem lies in the function attached to each of these context menus. At the moment clicking ‘file’ or ‘folder’ calls: this.create(obj); How do I specify the type? I’ve tried obj.attr("rel","type","folder"), I’ve tried obj.rslt.rel and many others but I’m just shooting in the dark, lol. I have gone through the documentation, the layout is good but its useless for explaining the properties of objects.

Below is the code for the context menu, the types plugin and the bind for the create node.

    fma_jstree = $("#archive")
.bind("before.jstree", function (e, data) {
    $("#alog").append(data.func + "<br />");
})
.jstree({
    // List of active plugins
    "plugins" : [
    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
    //"themes","json_data","ui","crrm","cookies","dnd","search","types","contextmenu"
    ],

    "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj);
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) { this.create(obj); }
                    }
                }
            }
        }
    },
        // 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" : -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
            "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" : icon_url + "/file.png"
                }
            },
            // The `folder` type
            "folder" : {
                // can have files and other folders inside of it, but NOT `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/folder.png"
                }
            },
            // The `drive` nodes
            "drive" : {
                // can have files and folders inside, but NOT other `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/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
            }
        }
    },
    .bind("create.jstree", function (e, data) {

    //if creating a root node
    if(!$(data.rslt.parent).attr("id")) var id = 1;
    //else get parent
    else var id = data.rslt.parent.attr("id").replace("node_","");
    $.post(
        ajaxurl,
        {
            "action" : "fma_create_node",
            "operation" : "create_node",
            "id" : id,
            "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);
            }
        },
        'json'
        );
})

any help would be well appreciated 😉
regards,
Daithi

Answer 1

solved it 😉
the code to specify the type of node to create is:

this.create(obj, "last", {"attr" : {"rel" : "default"}});

so now the code for the contextmenu plugin looks like this:

        "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj, "last", {"attr" : {"rel" : "default"}});
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) {                               
                            this.create(obj, "last", {"attr" : { "rel" : "folder"}});
                        }
                    }
                }
            }
        }
    },

For any noobs – if you look at the code posted in the posted question you should be able to see where this goes.