reading a nested list with javascript

[Stuart Rogers]

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

<ul>
  <li><input type="checkbox" value="100" name="recipient">100 - EVERYONE
  <ul>
 
    <li><input type="checkbox" value="1000" name="recipient">1000 - General Requirements
    <li><input type="checkbox" value="1100" name="recipient">1100 - Summary
  </ul>
  <ul>
    <li><input type="checkbox" value="2000" name="recipient">2000 - Site Construction
    <ul>
 
      <li><input type="checkbox" value="2050" name="recipient">2050 - Basic Site Materials and Methods
      <li><input type="checkbox" value="2060" name="recipient">2060 - Building Demolition
      <ul>
        <li><input type="checkbox" value="1467880" name="recipient">1467880 - A-Rainbow Company Demolition
        <li><input type="checkbox" value="1467998" name="recipient">1467998 - ATI Contractor
        <li><input type="checkbox" value="1468012" name="recipient">1468012 - Atwell Salvage & Demolition
      </ul>
    </ul>
  </ul>
</ul>

[Eric Pascarello]

basic idea:

 
//This is called with onclick="showHideList(this);" on the checkboxes
function showHideList( elem ){
    
    //Find the nested list under this checkbox
    var kid = elem.parentNode.nextSibling;
    
    //Make sure we do not get a whitespace node
    while(kid != null && kid.nodeType != 1){
        kid = kid.nextSibling;
    }
 
    //If we found a list show or hide it based on checkbox state
    if(kid!=null){
        kid.style.display = (elem.checked)?"":"none";
    }
}

Eric

[Stuart Rogers]

Thank You Eric, I will be trying your method out soon!

Regards,

Still-learning Stuart

[Stuart Rogers]

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]

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:

 

var vals = [];
 
var kid = elem.parentNode.nextSibling;
 
while(kid != null){
  if(kid.nodeType != 1){
    if(kid.tagName == "li"){
       var cb = kid.getElementsByTagName("input");
       if(cb.length==1 && cb[0].checked){
         vals.push(cb[0].value);
       }
    }
  }
  kid = kid.nextSibling;
}
 
alert(vals.join("\n"));
 

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

Eric

[Stuart Rogers]

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:

<ul id="conlist" class="mktree">
<li><input type="checkbox" value="100" name="recipient">100 - EVERYONE
  <ul>
    <li><input type="checkbox" value="1000" name="recipient">1000 - General Requirements
    <ul>
      <li><input type="checkbox" value="1100" name="recipient">1100 - Summary
      <li><input type="checkbox" value="1200" name="recipient">1200 - Price and Payment Procedures
      <li><input type="checkbox" value="1300" name="recipient">1300 - Administrative Requirements
      <li><input type="checkbox" value="1400" name="recipient">1400 - Quality Requirements
    </ul>
  </ul>
  <li><input type="checkbox" value="2000" name="recipient">2000 - Real Work
</ul>
 

and this function:

  function gatherCheckBoxes() {
    var nodec = document.getElementById( "snooker");
    var noded = document.getElementById( "dingo");
    var nodee = document.getElementById( "cargo");
    var nodef = document.getElementById( "flatbed");
    var ii = 0;
    var jj = 0;
    var tmpstr = "";
    var params = new Array;
    var chkbox_arry = document.getElementById('conlist').getElementsByTagName('li');
    noded.innerHTML = "number of li in chkbox_arry: " + chkbox_arry.length;
    for( ii = 0 ; ii < chkbox_arry.length ; ii++ ) {
        if( chkbox_arry[ii].firstChild.type == 'checkbox' && chkbox_arry[ii].firstChild.checked ) {
            params[jj] = "recipient=" + encodeURI( chkbox_arry[ii].firstChild.value)
            jj++;
        }
    }
        nodee.innerHTML = "number of elem in params: " + params.length;
  }

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]

Did you debug and see what the first child is?

Why are you pulling lis and not inputs?

Eric

[Stuart Rogers]

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