Questions to create a nested list retrieved from an XML-file and displayed in xHTML

The objective is to display a list of URLs in an HTML page. The list is retrieved from another file (currently in XML-format).

1. Validator: What is the proper xHTML mark-up for a list generated by JavaScript and still validate properly? I assume the reason is that JavaScript-code inside [ul]'s is not accepted. Is this correct? Is there another solution? The code below does produce the list anticipated, but it creates a warning (pls see below, 2.).

   <ul>list A
   <li>item A1</li>
   <li>item A2</li开发者_运维问答>        
   <ul>List B
       <li>item B1</li>
       <script type="text/javascript">/* <![CDATA[ */
           if (window.XMLHttpRequest)
               {  xmlhttp=new XMLHttpRequest();  } // code for IE7+, Firefox, Chrome, Opera, Safari                        
           else
               {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }       // code for IE6, IE5    
           xmlhttp.open("GET","/test-code/panorama-list2.xml",false);
           //  xmlhttp.open("GET","/test-code/panorama-list2.xml",true);   //this does not work. xmlDoc is null.
           xmlhttp.send();
   
           xmlDoc=xmlhttp.responseXML;
           var x=xmlDoc.getElementsByTagName("item");
           for (i=0;i<x.length;i++)
           {   document.write('<li class="menu2">'+'<a href="');
               document.write(x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue);
               document.write('">');
               document.write(x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);
               document.write('</li>');    }       
           //]]></script>      //This is line: 136
   </ul>
   

2. The JavaScript used in the code above is called using the synchronous method and thus creating the Warning: "An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing / Source File: /test-code/index2.htm / Line: 136"

The solution is to use the asynchronous method similar to the code below placed into the section. The solution is NOT to simply setting 'true' in the function xmlhttp.open (..., ..., true);.

<script type="text/javascript">//<![CDATA[
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {  xmlhttp=new XMLHttpRequest();  }   // code for IE7+, Firefox, Chrome, Opera, Safari
else
  {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }     // code for IE6, IE5
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    xmlDoc = xmlhttp.responseXML;
      var txt = "";
      var txt1 = "";
      var x = xmlDoc.getElementsByTagName("item");

      for (i=0;i<x.length;i++)
      {
        txt = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue + "<br />";
        txt1 = x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue + "<br />";
      }

    {
    document.getElementById("myDiv").innerHTML=txt;
    document.getElementById("myDiv1").innerHTML=txt1;
    }
  }
xmlhttp.open("GET","panorama-list2.xml",true);
xmlhttp.send();
}
//]]></script>

That does take care of the Warning. I assume a solution would be to combine these 2 examples of code.

That's what I am trying: The Variables 'txt' and 'txt1' retrieve the last entry of the XML-file.

How do I get all entires as well? The amount of entries varies.

Here is the big question:

How can I create a proper list using the asynchronous method and obtain a result like in the initial code example where the list is generated by stepping through the XML-file? After all, is there is another, better or simpler solution? The file with data for the list shall not be part of the xHTML mark-up.

At last an actual page using the initial code example. The list is revealed by hovering over the button at top-right: http://www.halo-photographs.com/2011-Cascata-da-Bernina/index.htm (yes, this is my own page) Thanks for your attention.

you code is an soup..

you need refactor that

now with jquery

in the load the you page

you should put somthing how that

$(document).ready(function(){    

 BeforePrepareList();

}); 

function BeforePrepareList()
{
  var xmlRequest = XmlHttpRequestResolver();

  xmlhttp.onreadystatechange=function()
              {
                   if (xmlhttp.readyState==4 && xmlhttp.status==200)

                   var xmlDoc = xmlhttp.responseXML;
                   // you need parse string response a array or use xslt, the next
                   // is simple for each
                   ListSetting(xmlDoc);
               }
   xmlhttp.open("GET","panorama-list2.xml",true);
   xmlhttp.send();
}

function XmlHttpRequestResolver()
{
  if (window.XMLHttpRequest)
   return xmlhttp=new XMLHttpRequest();  // code for IE7+, Firefox, Chrome, Opera, Safari
  else
   return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");     // code for IE6, IE5
}

function ListSetting(rawdata)
{     
  ListPopulate($("_PUT_YOUR_LIST_ID_HERE").get(0), rawdata);        
}


function ListPopulate(el, items) {
  el.options.length = 0;
  if (items.length > 0)
     el.options[0] = new Option('All', '');

  // THAT IS AN SIMPLE EXAMPLE, CHANGE FOR CREATE tag <a />
  $.each(items, function (index,item) {
    el.options[el.options.length] = new Option(item.[PROPERTY_A], item.[PROPERTY_B]);
 });    
}

and .....

more information here

invoke xml and transform http://www.ibm.com/developerworks/xml/library/x-ffox3/index.html examples de http request http://www.jibbering.com/2002/4/httprequest.html