CODEWITHSUNDEEP
jqueryjstree
Raghuvir Singh
Raghuvir Singh

Reputation: 85

How to select only one node in jstree when multiple node have same ID

I do search with keyword and get Matching node ID in jstree.

Now I have to navigate in js tree with "Next" and "previous" button.

I am using below lines of code which selects all node having same specId. 

_selectCurrentTreeNode : function() {

var specId = this._currentMatches[this._currentCursorPosition];
this._specTree.jstree("select_node", "#" + specId);

}

In my case there are three nodes which are having same specId but I want to select only one node at a time and after clicking "next" button I want to select another node.

How can I write this logic.

Upvotes: 1

Views: 7741

Answers (5)

Haïtham Kahloul
Haïtham Kahloul

Reputation: 17

I tried this code and it works for me:

var selectedNodeId;
$('#evts')
    .on("changed.jstree", function (e, data) {
        if(typeof(data.node) !== "undefined"){
            selectedNodeId = data.node.id;
        if(selectedNode !== selectedNodeId)
                selectOne(data);
        }
        if(data.selected.length) {
            console.info('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
        }
    })
.jstree({
    'core' : {
        'multiple' : false,
        'data' : [
            { "text" : "Root node", "children" : [
                    { "text" : "Child node 1", "id" : 1 },
                    { "text" : "Child node 2","id":2, "children":[                              
                        { "text" : "Child node 4","id":4},
                        { "text" : "Child node 5","id":5}
                    ]},
                    { "text" : "Child node 3","id":3},

            ]}
        ]
    },
    "plugins":["checkbox"]
});
function selectOne(data){
    var instance = $('#evts').jstree(true);
    if(data.selected.length&&data.node.id!==selectedNodeId)
        instance.deselect_all();
    instance.select_node(selectedNodeId);
}

Upvotes: 0

manishbagra
manishbagra

Reputation: 58

.bind("click.jstree", function (e, data) {
                    var id=a.attr('id');                                    
}

Upvotes: 1

raghuvir
raghuvir

Reputation: 1

Class of each node is empty . There is no class.

I do understand that it should have unique ID. I am getting data from other source and it is business requirement to have some duplicate ID.

My requirement is to select tree node one by one.

First I am searching nodes and getting all ID of searched nodes. Now I have "next" button where on click I have to select next matching node in jstree.

I am using below code for selecting node.

var allNodes = this._currentSearchableSpec.find("*");
var matchingTypeNodes = allNodes.filter("name");

// Using .each loop getting id of all mathching type nodes on matching pattern.

if (pattern.test(matchingTypeNodes.text())) {
var specId = $(matchingTypeNodes).attr("id");

// Then selecting node with specID
this._specTree.jstree("deselect_all");
this._specTree.jstree("select_node", "#" + specId);

To Do: In case of duplicate specID i need to select only one at a time. On clicking "next" button i need to select next node with duplicate specID.

Any help will be appreciated.

Upvotes: 0

Christoph
Christoph

Reputation: 51261

You need to use classfor that. The javascript selectors for ID (#) are made to only select one element, because it is forbidden to use several elements with the same ID (=unique identifier).

Use class instead and then you can iterate over the result set to get each matching element.

Upvotes: 0

Ali Alwash
Ali Alwash

Reputation: 533

Just a side node, by HTML guidelines, you aren't allowed to have multiple elements with the same id. They should be unique

Upvotes: 4

Related Questions