The output of JSTree's data.rslt.obj.text() function is an array of text values, not just the text from the specified node

I am facing an issue with the jstree where it is returning a concatenated list of node names when I try to rename a node, instead of just the text for the node I am renaming. The jstree is set up to load on demand. How can I ensure that only the text for the specific node being renamed is returned in the contextmenu? Any help would be greatly appreciated! Below is the complete 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) {
        // Ajax call to Server with parent node id and new node text
        $.ajax({
            type: "POST",
            url: '@Url.Content("~/RMS/insertRequirementNode")',
            data: {
                    ParentID : ParentNode,
                    ChildNodeText : data.rslt.obj.text()
            },
            success: function(new_data) {
                $.jstree._reference($("#RequirementsTree")).refresh(-1);
                ParentNode = null;
                data = null;
                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;
    }).bind("rename.jstree", function(e, data) {
            $.ajax({
                type: "POST",
                url: '@Url.Content("~/RMS/updateRMSHierarchyNode")',
                data: {
                    NodeID: ParentNode,
                    NodeText: data.rslt.obj.text()
                },
                success: function() {
                    ParentNode = null;
                    data = 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);
                            },
                            "separator_before" : true
                        },
                        renameItem : {
                            "label" : "Rename Branch",
                            "action" : function(obj) { 
                                this.rename(obj);
                                BranchReqFlag = "Branch";
                                ParentNode = obj.attr("id").substring(4);
                            },
                            "separator_before" : true
                        }
                    };
            }
        },
        plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"]
    });
});

Answer №1

data.rslt.new_name contains the newly entered name. By using Chrome or Firebugs to inspect data, you can uncover answers to many similar queries.


    }).bind("rename.jstree", function(e, data) {
            $.ajax({
                type: "POST",
                url: '@Url.Content("~/RMS/updateRMSHierarchyNode")',
                data: {
                    NodeID: ParentNode,
                    NodeText: data.rslt.new_name
                },
                success: function() {
                    ParentNode = null;
                    data = null;
                }
            });
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

I have utilized jsfiddle to replicate my problem. My goal is to position .top .inside above .bottom .inside. I am aware that z-index only functions within its respective position type, for example fixed and absolute do not share the same z-index level. How ...

Perform an action when a key is held down and when it is released

I am looking to implement a function that needs to be called under certain conditions: It should be triggered every second while a key is being held down (for example, if the key is held down for five seconds, it should fire 5 times every second). If ...

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Being aware that I may not be the first to inquire about this issue, I find myself working on an Angular 5 application where I need to programmatically open an accordion. Everything seems to function as expected in stackblitz, but unfortunately, I am enco ...

Retrieving an Array in CakePHP Through an Ajax Post Request

Despite the countless other 'duplicate' questions on this topic, I still find myself stuck. My goal is simply to log an array passed from PHP via ajax. In CakePHP 2.X: In View: <button class="quarter q1" value="1" value>Quarter 1</but ...

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

I have been attempting to find a solution, but have had no success. Is there a way to read a file using JavaScript or HTML? I have a text file named "sample.txt" with some information in it. This file is located in the same folder as the HTML file that con ...

Displaying an iframe on an AR marker with the help of CSS3DRenderer and jsartoolkit

I am trying to achieve an interesting effect by overlaying a html iframe on top of an augmented reality marker. However, I seem to be facing some issues with the CSS3DRenderer not producing the same result as the WebGLRenderer and I'm struggling to pi ...

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

Is it possible to use JavaScript to click on a particular point or element within a canvas?

Is there a way to trigger a click at a specific point on a canvas without direct access to the code that generates it? I've attempted using coordinates, but haven't had any success. Any alternative suggestions would be appreciated. UPDATE: To pr ...

Extract specific nested elements

Looking for assistance with extracting specific nested objects from a series structured like so: data = {"12345":{"value":{"1":"2","3":"4"}}, {"12346":{"value":{"5":"6","7":"8"}}, {"12347":{"value":{"9":"0","11":"22"}} In need of creating a functio ...

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

Having trouble creating an alias system in discord.js and encountering errors

While developing an alias system for my Discord bot, I encountered a situation where I wanted to display the message: "if the user entered the wrong command name or alias then return: invalid command/alias". However, when implementing this logic, ...

What steps should I take to verify the validity of an Angular form?

I am struggling with validating an inscription form in HTML. Despite trying to implement validations, the inputs are still being saved in the database even when they are empty. Here are the validations I want to include: All inputs are required Email addr ...

Incorrect credentials trigger an error in Nodemailer

Currently, I am utilizing nodemailer to handle email submissions from a registration form. Below is the code for my registration form: <form action="/registration" method="post"> <h3 class="text-center" style="font-family: 'champagne-l ...

Utilizing JavaScript regex to remove substrings that contain parentheses

I am working with a string variable named myString that includes some unwanted content towards the end: var myString = 'The sentence is good up to here foo (bar1 bar2)'; var toBeRemoved = 'foo (bar1 bar2)'; I am looking for the best w ...

Issue with .env file access token: Successfully working for one API in Next.js, but failing for

I am utilizing two different APIs, WordsAPI and Spotify API. Each API requires an access token or key which I have stored in a secure .env file. I have successfully fetched data from WordsAPI using the same method in getStaticProps, but I am facing issues ...

Problems Arise Due to HTA File Cache

My JavaScript function fetches the value of a label element first, which serves as an ID for a database entry. These IDs are then sent to an ASP page to retrieve the save location of images from the database. The save location information for each selecte ...

Next.js allows for passing dynamically loaded server-side data to all components for easy access

(I've recently started working with Next.js and inherited a project built using it, so please forgive me if this is something obvious that I'm missing) I have a set of data that needs to be loaded server-side on each request. Initially, I had im ...

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

I'm currently utilizing Vue.js for implementing two-way binding. One issue I am facing is with an edit button that should convert a text field into an input field upon clicking. However, the DOM does not update immediately as expected. For instance: ...

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

After successfully parsing data from a Tumblr API, I encountered an issue when introducing tags within the body description, which includes images and hyperlinks. The main task at hand is to create a list of blog titles where the corresponding blog descri ...