Get array of selected leaf nodes (checkbox UI)

1,626 views
Skip to first unread message

Ryan H

unread,
May 19, 2009, 3:11:04 PM5/19/09
to jsTree
I am trying to figure out how to get a list of the selected leaf nodes
when using a checkbox UI. I can easily get what item was selected,
but I need to know all leaves that have checkmarks. I then want to
take this info and pass it to another page, to be used.

I am using the included example and have modified the node structure.
My current code can be found on pastebin - http://pastebin.ca/1427741

vakata

unread,
May 19, 2009, 4:17:02 PM5/19/09
to jsTree
Hi,

Just use a simple query - $("a.checked") ... you may want to set the
context to the tree's container though.

Kindest regards,
Ivan

KaisRar

unread,
Jun 2, 2009, 11:29:24 AM6/2/09
to jsTree
Hello All,

I am trying to do something similar, e.g. getting all the selected
paths.

I'm very new to Jquery and Javascript in general. Currently I have the
JSTree with the checkbox theme pulling data from a jsp.

Right now I am trying to have a button just alert me as to the
results.

onclick="alert($.tree_reference('demo1').selected_arr;" Prints the
selected array, but how do I implement the query from the previous
post?


Thank you all!

KaisRar

unread,
Jun 2, 2009, 11:56:30 AM6/2/09
to jsTree
I have been experimenting more, and can get the text from checked
nodes, but not some attributes I set in their JSON.

onClick="alert($('a.checked')[0].text)" gives me text, but when I
try to do [0].my_attr or [0].attr('id') I just get undefined.

Any way to get at my data I am putting in? It ahs to be there
somewhere since it is being transmitted to my servlet....

Sorry for being such a javascript noob....

vakata

unread,
Jun 3, 2009, 9:17:40 AM6/3/09
to jsTree
Hi,

Sorry for the delay. Just read jQuery's documentation. If you need the
ID attribute of the first element in the above query you'd do:
alert($('a.checked').eq(0).attr("id"));

If you want all the ID's comma-separated for example, you could do
this:
var ids = [];
$('a.checked').each(function () { ids.push(this.id); });
alert(ids.join(","));

I hope this helps,
Ivan

KaisRar

unread,
Jun 3, 2009, 10:19:16 AM6/3/09
to jsTree
Thank you for your reply, however your proposed solution is not
working.

According to firebug, the html I have is
-------------
<ul class="ltr">
<li id="iop-data" class="last open" path="iop-data" rel="root">
<a class="checked" style="" href="#">arm-iop</a>
<ul>
<li id="1998" class="closed" path="iop-data/1998">
<a class="checked" style="" href="#">1998</a>
</li>
<li id="1999" class="closed" path="iop-data/1999">
<a class="checked" style="" href="#">1999</a>
</li>
<li id="2000" class="closed last" path="iop-data/2000">
<a class="checked" style="" href="#">2000</a>
</li>
</ul>
</li>
</ul>
--------------------------------------------

Now, each <a> object has the class 'checked' but it does not have an
id attribute. The parent <li> tag has an id attribute, as well as
"path" which is what I'm really interested in.

Your query will give me a jquery list of all the <a>'s, but what I'm
really after is their parents, the <li> tag.

Is there a way to do this with Jquery's parent function?

KaisRar

unread,
Jun 3, 2009, 10:33:02 AM6/3/09
to jsTree
Actually, I solved it.

function alertMe(){
var ids = [];
$('a.checked').each(function () { ids.push(this.parentNode.getAttribute
('path')); });
alert(ids.join(","));
}

Does this violate any sort of good Javascript practice though? I'm
pretty new to the language.
Reply all
Reply to author
Forward
0 new messages