Question

I would like to display a fancybox when a user clicks the Create button to have them fill in a form. This is used to capture additional data and associate it with the newly created node in jsTree. I need to get the ID of the newly created node and pass it along as a GET parameter in the fancybox call. So far I just can’t seem to figure out how to get the ID.

Here is what I have so far:

    $("#demo").jstree({ 
        // List of active plugins
        "plugins" : ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu", "unique"],

        .bind("create.jstree", function (e, data) {
            $.post(
                "server.php", 
                { 
                    "operation" : "create_node", 
                    "id" : data.rslt.parent.attr("id").replace("node_",""), 
                    "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);
                    }
                }
            );
        })

    $("#demo").bind("before.jstree", function (e, data) {
        if(data.func === "create") { 
            var id = data.args[0].attr("id").replace("node_","");
            showFancybox("edit_task.php?action=create&parent_id="+id);
        }
    })

    // Code for the menu buttons
    $(function () { 
        $("#mmenu input").click(function () {
            switch(this.id) {
                case "add_default":
                case "add_folder":
                    $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
                    break;
                case "search":
                    $("#demo").jstree("search", document.getElementById("search_text").value);
                    break;
                case "text": break;
                default:
                    $("#demo").jstree(this.id);
                    break;
            }
        });
    });

The code that I have now finds the parent id before the new node is created. I tried waiting a few seconds and then trying to read the newest entry from the database, but this doesn’t work very reliably and is slower than needed. How can I get the new node’s ID from jsTree once it’s been created and added to the database?

Answer 1

This works:

id = data.args[0].attr("id");