1

In this fiddle : http://jsfiddle.net/ak4Ed/ when a node is selected and the key 'c' is pressed the selected node id is displayed as popup.

How can I modify the code so that when a node is selected the popup is displayed instead of relying on the user pressing the 'c' hotkey ?

Reading the jstree documentation this does not seem to be explained ? : http://www.jstree.com/documentation/core

Here is the jsfiddle code :

<div id="demo1" style="height:100px;">
     <ul>
         <li id="node_1_id">
             <a>Root node 1</a>
             <ul>
                 <li id="child_node_1_id">
                     <a>Child node 1</a>
                 </li>
                 <li id="child_node_2_id">
                     <a>Child node 2</a>
                 </li>
             </ul>
         </li>

     </ul>
     <ul>
                    <li><a>Team A's Projects</a>
                        <ul>
                        <li><a>Iteration 1</a>
                            <ul>
                                <li><a>Story A</a></li>
                                <li><a>Story B</a></li>
                                <li><a>Story C</a></li>
                            </ul>
                            </li>
                        <li><a>Iteration 2</a>
                        <ul>
                            <li><a>Story D</a></li>
                              </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
 </div>


$(function() {

    $("#demo1").jstree({
                "hotkeys": {
                    "c" : function(event) { 
                        var node = this._get_node();
                        if(!node) {
                            alert("no node selected");   
                        }
                        else {
                            alert("selected node: "+node.attr("id"));
                        }
                    },
                    "d": function(event) {
                        var node = this._get_node(this.data.ui.hovered);
                        if(!node) {
                            alert("no node hovered");    
                        }
                        else {
                            alert("hovered node: "+node.attr("id"));
                        }
                    }
                },
        "plugins": ["ui", "html_data", "themes", "hotkeys"]
    });
});
2
  • Selected how? By click? If so, why don't you just use standard jQuery and skip jstree?
    – ryan
    Aug 24, 2013 at 20:00
  • @ryan but I want to render the contents using a tree structure, so how can bypass jstree ?
    – blue-sky
    Aug 24, 2013 at 20:04

1 Answer 1

1

There is an event select_node.jstree. It fires when a node is selected. I didn't find it in the documentation (strange...).

Then to find a selected node you can by class jstree-clicked.

I have updated your jfiddle: http://jsfiddle.net/ak4Ed/118/

4
  • @phil.tx thanks, do you mind explaining how you found the select_node.jstree event ?
    – blue-sky
    Aug 24, 2013 at 21:20
  • just tried "select_node" (like other events from docs with mask "<action>_node") and it worked :)
    – phts
    Aug 24, 2013 at 21:26
  • This says selected node: undefined?
    – ryan
    Aug 25, 2013 at 0:53
  • because not all 'li' elements have id in this example
    – phts
    Aug 25, 2013 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.