javascript - Questions to create a nested list retrieved from an XML-file and displayed in xHTML -
the objective display list of urls in html page. list retrieved file (currently in xml-format).
validator: proper xhtml mark-up list generated javascript , still validate properly? assume reason javascript-code inside [ul]'s not accepted. correct? there solution? code below produce list anticipated, creates warning (pls see below, 2.).
<ul>list <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 ie7+, firefox, chrome, opera, safari else { xmlhttp=new activexobject("microsoft.xmlhttp"); } // code ie6, ie5 xmlhttp.open("get","/test-code/panorama-list2.xml",false); // xmlhttp.open("get","/test-code/panorama-list2.xml",true); //this not work. xmldoc null. xmlhttp.send(); xmldoc=xmlhttp.responsexml; var x=xmldoc.getelementsbytagname("item"); (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 line: 136 </ul>the javascript used in code above called using synchronous method , creating warning: "an unbalanced tree written using document.write() causing data network reparsed. more information https://developer.mozilla.org/en/optimizing_your_pages_for_speculative_parsing / source file: /test-code/index2.htm / line: 136"
the solution use asynchronous method similar code below placed section. solution not setting 'true' in function xmlhttp.open (..., ..., true);.
<script type="text/javascript">//<![cdata[ function loadxmldoc() { if (window.xmlhttprequest) { xmlhttp=new xmlhttprequest(); } // code ie7+, firefox, chrome, opera, safari else { xmlhttp=new activexobject("microsoft.xmlhttp"); } // code ie6, ie5 xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) xmldoc = xmlhttp.responsexml; var txt = ""; var txt1 = ""; var x = xmldoc.getelementsbytagname("item"); (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 take care of warning. assume solution combine these 2 examples of code.
that's trying: variables 'txt' , 'txt1' retrieve last entry of xml-file.
how entires well? amount of entries varies.
here big question:
how can create proper list using asynchronous method , obtain result in initial code example list generated stepping through xml-file? after all, there another, better or simpler solution? file data list shall not part of xhtml mark-up.
at last actual page using initial code example. list revealed hovering on button @ top-right: http://www.halo-photographs.com/2011-cascata-da-bernina/index.htm (yes, own page) attention.
you code soup..
you need refactor that
now jquery
in load 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; // need parse string response array or use xslt, next // simple each listsetting(xmldoc); } xmlhttp.open("get","panorama-list2.xml",true); xmlhttp.send(); } function xmlhttprequestresolver() { if (window.xmlhttprequest) return xmlhttp=new xmlhttprequest(); // code ie7+, firefox, chrome, opera, safari else return xmlhttp=new activexobject("microsoft.xmlhttp"); // code 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', ''); // simple example, change create tag <a /> $.each(items, function (index,item) { el.options[el.options.length] = new option(item.[property_a], item.[property_b]); }); } , ..... more information here
invoke xml , transform http://www.ibm.com/developerworks/xml/library/x-ffox3/index.html examples de http request http://www.jibbering.com/2002/4/httprequest.html
Comments
Post a Comment