wood burning stoves*
The moose likes HTML, CSS and JavaScript and the fly likes reading a nested list with javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "reading a nested list with javascript" Watch "reading a nested list with javascript" New topic
Author

reading a nested list with javascript

Stuart Rogers
Ranch Hand

Joined: Oct 02, 2008
Posts: 139
I have a servlet that creates a HTML unordered list with many nested levels and dynamically loads into my .jsp . Each list element has a checkbox.

Questions: how would I use javascript to iterate through the list top->bottom? could this hypothetical iterator tell when it's descended into/ascended from a deeper level? The object here is to collect all lowest-level elements checked AND all elements under a checked higher-level element.

Can this be done? Has it already been done? Pointers/suggestions/ideas/examples/links are all welcome and appreciated.

TIA,

Still-learning Stuart

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
basic idea:



Eric
Stuart Rogers
Ranch Hand

Joined: Oct 02, 2008
Posts: 139
Thank You Eric, I will be trying your method out soon!

Regards,

Still-learning Stuart
Stuart Rogers
Ranch Hand

Joined: Oct 02, 2008
Posts: 139
Hmmm, this didn't quite work out. The getElementsByTagName("li") method works for loading all the list items into a javascript array, but I lose all depth information. I need something to walk the list in exact order while keeping track of the depth , like

var llist = document.getElementById('myulist');
for( ii = 0 ; ii < llist.length ; ii++ ) {
if( llist[ii].elem == "ul") {
cntr++
} else {
if( llist[ii].elem == "/ul") {
cntr--
}
}
}


The overall idea here is when I come to a <li> whose checkbox has been clicked, gather all inner-nested <li> values.



Now what?

Still-learning Stuart
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Not sure what that code you posted does since you are using getElementById and it only pulls in one node.

And if you do getElementsByTagName, it does not pull in /ul so that is not necessary.

I am not sure what you are trying to do exactly, but I will write some code here and see if it helps:


The above is untested, just wrote it in this wonderful textbox on the forum.

Eric
Stuart Rogers
Ranch Hand

Joined: Oct 02, 2008
Posts: 139
I decided to dumb-down my javascript and do the heavy lifting on the server side so now only need to grab the values of checked boxes from the unordered list. Given this list:



and this function:



the function never finds any checked boxes. I've pored over some very similar examples on the 'net so I must be doing something boneheaded again.
Can anyone spot what I'm doing wrong/not doing right?

TIA,

Still-learning Stuart
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Did you debug and see what the first child is?

Why are you pulling lis and not inputs?

Eric
Stuart Rogers
Ranch Hand

Joined: Oct 02, 2008
Posts: 139
I'm using this as my primary template:

http://www.sitepoint.com/blogs/2008/09/16/a-free-javascript-speed-boost-for-everyone/

so collecting the li's should work.

But changing my code to collect the input tags and removing references to firstChild does the trick. Maybe I should quit while I'm (finally) ahead.

Thanks for your continued help Eric!

CASE CLOSED

Still-learning Stuart
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: reading a nested list with javascript