Ajax call within JSTree bind on "create.jstree" for contextmenu is not working

Question

Everything seems correct in my $.ajax call within the .bind on create.jstree. However, the call to the controller (I'm using MVC 3) is not occurring for some reason. I put a breakpoint on the POST function that's referenced by the ajax call, but it never even gets called. Which leads me to believe that there's something wrong with the combination of the bind and ajax call that is preventing the post function from ever being called. I would appreciate the advice.

jstree code:

        $("#RequirementsTree")
    .bind("select_node.jstree", function(event, data) {
            if(is_requirement_node(data))
            {
                var id = data.rslt.obj.attr("id");

                if(id != null)
                {
                    $("#RequirementsTree").jstree('close_all')
                }
                else {
                    alert("Requirement node select error");
                }
            }
     })
    .bind("create.jstree", function(e, data) {
        alert(data.rslt.obj.text());
        alert(ParentNode);
        // Ajax call to Server with parent node id and new node text
        debugger;
        $.ajax({
            type: "POST",
            url: function(node) {
                return "/RMS/insertRequirementNode";
            },
            data: {
                    ParentID : ParentNode,
                    ChildNodeText : data.rslt.obj.text()
            },
            success: function(new_data) {
                return new_data;
            }   
        });
        ParentNode = null;
        if (data.rslt.parent == -1) {
            alert("Can not create new root directory");
            // Rollback/delete the newly created node
            $.jstree.rollback(data.rlbk);
            return;
        }
                BranchReqFLag = null;
    }).jstree({
        json_data: {
            data: RBSTreeModel,
            ajax: {
                type: "POST",
                data: function (n) {
                    return {
                        NodeID: n.attr("id").substring(4),
                        Level: n.attr("name").substring(7)
                    };
                },
                url: function (node) {
                    return "/Audit/GetRequirementsTreeStructure";
                },
                success: function (new_data) {
                    return new_data;
                }
            }
        },
        contextmenu: {
            items: function($node) {
                    return {
                        createItem : {
                            "label" : "Create New Branch",
                            "action" : function(obj) { this.create(obj); BranchReqFlag = "Branch"; ParentNode = obj.attr("id").substring(4);}
                        },
                        renameItem : {
                            "label" : "Rename Branch",
                            "action" : function(obj) { this.rename(obj);}
                        }
                    };
            }
        },
        plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"]
    });

Controller POST function:

        [AllowAnonymous]
    [HttpPost]
    public int insertRequirementNode(int ParentID, string ChildNodeText)
    {
        RBSText CurrNode = new RBSText();
        int CurrentNodeID = -1;

        //CurrNode.RMSHierarchyText = ChildNodeText;
        using (Contract ActiveContract = getContract())
        {
            try
            {
                // Inserts the new node beneath the Parent Node
                CurrentNodeID = ActiveContract.CreateRMSNode(CurrNode, ActiveContract.ContractId, ActiveContract.user_id, 2, "Child");
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
        return CurrentNodeID;
    }

Answer 1

The URL specified in your $.ajax() function is likely wrong. Use @Url.Content() along with the the Server Root Wildcard: ~ to prefix your URL , so your URL always refers to the correct server root path no matter how your application is deployed, this assuming that you are setting up your jstree in a Razor View so you have access to the Razor Engine:

   $.ajax({
        type: "POST",
        url: "@Url.Content("~/RMS/insertRequirementNode")",
        data: {
                ParentID : ParentNode,
                ChildNodeText : data.rslt.obj.text()
        },
        success: function(new_data) {
            return new_data;
        }   
    });

If you are setting up jstree in a .js file, then you need to store the server root in a javascript variable defined in a Razor View first and refer to that variable instead.