Get list of checked node IDs of jstree

Question

I'm new to jstree and jQuery and have a little problem with node checking in my test tree.

The user should first check the nodes he needs, then click on the "Summary" button to get a list of the IDs of the checked nodes in an alert window. I also want to export a list of the IDs for further use in a cgi file.

This is my code:

<!doctype html>
<html>
<head>
    <title>jstree test</title>
</head>
<body>
    <div id="testtree">
        <ul>
            <li id="1" title="ID:1"><a>Fruits and Vegetables</a>
              <ul>
            <li id="11" title="ID:11"><a>Fruit</a>
                  <ul>
                    <li id="111" title="ID:111"><a>Apple</a></li>
                    <li id="112" title="ID:112"><a>Banana</a></li>
                  </ul>
                </li>
            <li id="12" title="ID:12"><a>Vegetables</a>
                  <ul>
                    <li id="121" title="ID:121"><a>Zucchini</a></li>
                    <li id="122" title="ID:122"><a>Tomato</a>
                         <ul>
                            <li id="1221" title="ID:1221"><a>Red Tomato</a></li>
                            <li id="1222" title="ID:1222"><a>Green Tomato</a></li>
                        </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
         </ul>
    </div>
    <button>Summary</button>
    <script type="text/javascript" src="_lib/jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script>

        $(document).ready(function() {

            var checked_ids = []; // list for the checked IDs

            $("#testtree").jstree({
                "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
            });

        })

        var button = document.querySelector( "button" );

        // If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
        button.addEventListener( "click", function( ev ) {
            alert( "Your Selection: ");
        }, false);

    </script>
</body>
</html>

Any suggestions how I can do this?

Update 1:

I tried to use Brad's solution from the other post but I still can't get it working because I don't know how to add the IDs to the array.

This is my new code:

<script>

    var checked_ids = [];

    $(document).ready(function() {

        $("#testtree").jstree({
            "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
        });

        // How do I add the IDs to the array?
        $("#testtree").jstree('get_selected').attr('id')

    })

    var button = document.querySelector( "button" );

    // If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
    button.addEventListener( "click", function( ev ) {
        alert("Your Selection: "+ checked_ids.join("\n"));
    }, false);

</script>

Any help would be appreciated.

Update 2:

The array still doesn't get filled:

<button>Summary</button>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script>

    $(document).ready(function() {

        $("#testtree").jstree({
            "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
        });

        var arr = new Array();

        $("#testtree").jstree('get_checked').each(function(index) {
        arr.push($(this).attr('id'));
        });

        var button = document.querySelector( "button" );

        button.addEventListener( "click", function( ev ) {
            alert("Your Selection: "+ arr.length + " " + arr[0] + " " + arr[1]);
        }, false);

    })
</script>

I tried to use the solution in the other post, but I still don't know how to add to my code. — atreju, Aug 21 '13 at 11:20

Andrey Stukalin · Accepted Answer · 2013-08-21T12:07:06.807

1

The problem is in this place .attr('id'). It returns only 1st id. You should use each() to fill your array:

var arr = new Array();
$("#testtree").jstree('get_selected').each(function(index) {
arr.push($(this).attr('id'));
});

UPD:

Selected items are those you select/highlight. You need checked items. So the code will be

var arr = new Array();
$("#testtree").jstree('get_checked').each(function(index) {
arr.push($(this).attr('id'));
});

I've created a jsfiddle http://jsfiddle.net/J5ZaK/123/

edited Aug 21 '13 at 12:07

answered Aug 21 '13 at 11:39

Andrey Stukalin

5,328
2
31
50

Thanks for your help, but the alert now returns "undefined". How do I reference html list IDs? Also with "attr"? – atreju Aug 21 '13 at 11:49
Thanks again, but I'm using "checkbox" not "hotkeys" - is there a difference? Maybe you could have at look at my code, I've updated the first post again. – atreju Aug 21 '13 at 12:18
Did you see my jsfiddle? I used you html and javascript. But there is an error in your code: you get checked nodes outside button press event handler. Compare with jsfiddle, please. – Andrey Stukalin Aug 21 '13 at 12:23
I must have opened the wrong jsfiddle at first. Now it works! Thank you so much for your help and your patience, you saved my day! – atreju Aug 21 '13 at 12:31

Get list of checked node IDs of jstree

1 Answers1

Linked