casper3912 Posted March 31, 2009 Share Posted March 31, 2009 for my web design class i'm in charge of the "events page", it contains a table of events for the current sport season. I hate updating it, and i also have a few amazing ideas that i want to do with it. i want to make it dynamic and interactive. i'm storing the values for the table in an external xml document. the first function i've tried to write up is a "show all" function. explorer doesn't show any errors and none jump out at me. i would appreciate any help xmlDoc=loadXMLDoc("Events.xml"); //pharse and load xml Doc, function from w3schools and not shown//varsvar Info = new array("date","time","where","vrs");var B= 0; // select sections for xmlvar C= 0; // select index of specific tagINum = 0; // changes index of Info array //access to xml var ACXML = xmlDoc.getElementsByTagName('root')[0];var SL= ACXML.getElementsByTagName('Sport');var TL= SL.getElementsByTagName('where').length * 4; /*all of the xml doc. tags occur the same amount of times so the amount of one is sufficient so long as its multipled by 4*/ // code here sets table attribute, creates table element and appends it to it's appropriate parentvar PHSEventTable= document.createElement('table');var MainParentTag = document.getElementById("eventTable"); PHSEventTable.setAttribute("id","PHSEventTable"); MainParentTag.appendChild(PHSEventTable);//for loop for rows,domains and content of tablefor (var i = 0; i<SL.length, i++) { //code here creates Tr element, and appends to the table, var TR = document.createElement('tr'); PHSEventTable.appendChild(TR); for (var j = 1; j<TL+1, j++) { /*code in this section creates td element, makes INum change, makes xml doc. tag's text value into the Td text value, and appends the created td to previously created TR*/ var TD = document.createElement('td'); var XMLTextValue= ACXML.getElementsByTagName("Sport")[B].getElementsByTagName(Info[INum])[C].nodeValue; var text = document.createTextNode(XMLTextValue); TD.appendChild(text); TR.appendChild(TD); INum ++; if (j % 4 == 0)// if j is a multiple of 4 { // code here creates tr and appends it to the table, increases specific tag index, as well as make INum zero. C++; INum=0; var TR = document.createElement('tr'); PHSEventTable.appendChild(TR); } }//changes sportB++;} Link to comment Share on other sites More sharing options...
casper3912 Posted March 31, 2009 Author Share Posted March 31, 2009 i should use a wildcard (*) for the TL var. Link to comment Share on other sites More sharing options...
jeffman Posted March 31, 2009 Share Posted March 31, 2009 Two things jump out at me.1. the array constructor function begins with uppercase A. Thus Info = new Array(); I don't know how IE feels about that, but Firefox will break.2. Both of your for loops are initialized wrong. You have commas where you need semicolons.Maybe that's it. It's hard to read code that names so many variables unsemantically, like TL. And of course I can't test it because I don't know what your xml doc looks like. If you don't get this solved quickly, you might want to post that doc, or a shortened (but working) version of it. And maybe post loadXMLDoc so someone doesn't have to go and find it. Link to comment Share on other sites More sharing options...
casper3912 Posted March 31, 2009 Author Share Posted March 31, 2009 thank you, my eyes over look the commas instead of the semi colons, stupid mistake i do sometimes for some reason,I was unaware that the Array had to be capitalized,I can make the variables more descriptive TL stands for tag length, or length of tagsi can also make the comments more descriptive and give a more detail explanation of the code. unfortenly i'll have to do that later. thanks for looking at it, i'll do your suggestions and i'll make the variables more semantic. it'll probally be posted later tonight. Link to comment Share on other sites More sharing options...
jeffman Posted March 31, 2009 Share Posted March 31, 2009 Be aware that IE is a terrible environment for testing code. Not only is Firefox standards-compliant, but it also has better debugging tools. The built-in error console would have flagged the errors I mentioned the first time you loaded the page. And you can get even better tools as add-ons. Link to comment Share on other sites More sharing options...
casper3912 Posted April 1, 2009 Author Share Posted April 1, 2009 fire fox's error console is alot better then IE. it says that : MainParentTag.appendChild(PHSEventTable);is null... hm, i don't see how though, my Html, its rather simple. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><script type="text/javascript" src="EventScript.js"></script></head><body><div id ="eventTable"> </div></body></html> working but condensed xml, rather simple as well: <root><Sport type = "football"> <date>testing </date> <time>testing </time> <where>testing </where> <vrs>testing </vrs> <date>testing </date> <time>testing </time> <where>testing </where> <vrs>testing </vrs></Sport><Sport type = "soccer"> <date>testing </date> <time>testing </time> <where>testing </where> <vrs>testing </vrs></Sport></root> Heres the fun part. i have alot more i'll need to add to this, but i just want to get the "write all" function working for now. The javascript first defines the WriteAll function, I was going to use a function but i couldn't find it again for reference, so i used something else found at http://www.w3schools.com/xml/tryit.asp?fil...yxml_parsertest, i think it should work. The first thing the WriteAll function does is parse Events.xml. it then creates an Array with the names of the tags in the xml documents as values in the arrayit then defines variables that will be used as indexs in the coming dom statementsthen it defines ACXML(stands for access to xml), its a variable used in the upcoming code to shorten the amount i need to type.it then defines a var that holds how many "sport" tags are in the documentthen a table element is created, its id value is set to "eventTable"then the element with PHSEventTable is found and the created table is appended to itA for loop starts, it occurs the same amount of times as there are "sport" tags.a "tr" element is created and appended to the previously created tablehow many tags are children of the current sport tag is storedanother for loops starts that terminates after it has occured the amount of times that is equal to how many children of "Sport" there aretd element is createdthe text inside of a tag with in a sport tag is found, what sport tag it is in is determined by the value of "sportIndex" declared earlier. which tag name is determined by the array, with the index of the array determined by "infoArrayIndex", and which one of those tags with that name is determined by currentTagIndexa text node is created and its value is equal to the text determined in the previous statement, its then appended to previously created Td elementthe td element is appended to the previously created Tr elementInfoForArrayIndex is incremented by one, so that the next tags text value can be had on the next go around of the loop if the loop has occurred a multiple of 4 times then "InfoForArrayIndex" equals zero, since there are only 4 tag names i need to cycle through increase "CurrentTagIndex" to move on to the next set of 4 tags create another Tr element and append it end ifend 2nd for loopincrement "sportIndex" to move on to the next sportEnd 1st for loopthen i'm using a function that allows for multiple onload events to happen, its definedthen the w3 parse xml is defined, the one i couldn't find for reference. the onload function is used. function WriteAll() {try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) { alert(e.message); return; } }xmlDoc.async=false;xmlDoc.load("events.xml");//varsvar Info = new Array("date","time","where","vrs");var SportIndex= 0; // select sections for xmlvar CurrentTagIndex= 0; // select index of specific tagvar InfoArrayIndex = 0; // changes index of Info array //access to xml var ACXML = xmlDoc.getElementsByTagName('root')[0];var SportLength= ACXML.getElementsByTagName('sport').length; // code here sets table attribute, creates table element and appends it to it's appropriate parentvar PHSEventTable= document.createElement('table');var MainParentTag = document.getElementById("eventTable"); PHSEventTable.setAttribute("id","PHSEventTable"); MainParentTag.appendChild(PHSEventTable);//for loop for rows,domains and content of tablefor (var i = 0; i<SportLength; i++) { //code here creates Tr element, and appends to the table, var TR = document.createElement('tr'); PHSEventTable.appendChild(TR); var TagLength= ACXML.getElementsByTagName('Sport')[SportIndex].childNodes.length; for (var j = 1; j<TagLength+1; j++) { var TD = document.createElement('td'); var XMLTextValue= ACXML.getElementsByTagName("Sport")[SportIndex].getElementsByTagName(Info[InfoArrayIndex])[CurrentTagIndex].nodeValue; var text = document.createTextNode(XMLTextValue); TD.appendChild(text); TR.appendChild(TD); InfoArrayIndex ++; if (j % 4 == 0)// if i is a multiple of 4 { CurrentTagIndex++; InfoArrayIndex=0; var TR = document.createElement('tr'); PHSEventTable.appendChild(TR); } }//changes sportSportIndex++;}}//added functionality to javascript// addloadEvent by simon willison(simon.incutio.com) allows multiple onloadsfunction AddLoadEvent(func) { var OldOnLoad = Window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { OldOnLoad(); func(); } } }//parse xml from w3schools.comfunction loadXMLDoc(dname) {try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} }try { xmlDoc.async=false; xmlDoc.load(dname); return(xmlDoc); }catch(e) {alert(e.message)}return(null);}//end parse//End added functionality // onloadsAddLoadEvent(WriteAll()); Link to comment Share on other sites More sharing options...
jeffman Posted April 1, 2009 Share Posted April 1, 2009 Here's a big problem: AddLoadEvent(WriteAll());AddLoadEvent() is expecting a reference to a function. That would look like this:AddLoadEvent(WriteAll); // no parenthesesWhat actually happens is that, because of the parens, AddLoadEvent(WriteAll()) is calling the WriteAll() function, and passing the return result (a null value in this case) to window.onload. So WriteAll() is getting called before the page loads, not after. That's why the "eventTable" element doesn't exist yet, and MainParentTag gets assigned a null value.You might also look at this line in your AddLoadEvent() function:var OldOnLoad = Window.onload;The uppercase "W" might break it in some browsers. Javascript is (supposed to be) case sensitive.Let us know how it goes. Link to comment Share on other sites More sharing options...
casper3912 Posted April 2, 2009 Author Share Posted April 2, 2009 fire fox error console is a lot better the IE. fire fox says that: var XMLTextValue= ACXML.getElementsByTagName("Sport").getElementsByTagName(Info[iNum])[C].nodeValue;is undefined and IE says that an object is required at line 53 which is where XMLtextValue is declared. yet all threevar ACXML = xmlDoc.getElementsByTagName('root')[0];var TagLength= ACXML.getElementsByTagName('Sport')[sportIndex].childNodes.length;andvar SportLength= ACXML.getElementsByTagName('sport').length; occur before XMLTextValue and it says nothing is wrong with them.so my xml should be loadedI believe my array is declared correctly, like this:var Info = new Array("date","time","where","vrs");hmmm... Link to comment Share on other sites More sharing options...
justsomeguy Posted April 2, 2009 Share Posted April 2, 2009 fire fox says that: var XMLTextValue= ACXML.getElementsByTagName("Sport").getElementsByTagName(Info[iNum])[C].nodeValue;is undefined It wouldn't say that an entire line of code is undefined, it's saying that one of the objects on that line is undefined, such as ACXML, or ACXML.getElementsByTagName("Sport"). It should be saying specifically which one it is. There are a few things there that might be undefined. It would be one of these:ACXMLBACXML.getElementsByTagName("Sport")InfoINumInfo[iNum]CACXML.getElementsByTagName("Sport").getElementsByTagName(Info[iNum])[C] Link to comment Share on other sites More sharing options...
casper3912 Posted April 6, 2009 Author Share Posted April 6, 2009 ok, i went through with an alert and all my variables are defined. it seems like just one thing isn't working at the moment. I placed alert (SL.getElementsByTagName(Info[iNum])[C].nodeValue); after the definition of my XMLTextValue variable. it says that the SL.getEl....nodeValue is null, yet i should be getting the string "testing" backthe V in nodeValue is in Caps.if I replace that with alert (SL.getElementsByTagName(Info[iNum])[C];I get the strings[object] in IE and [object Element] in FFAlert©; gets me the value of C, for the instance of the for loop its in. alert(SL.getElementsByTagName(Info[iNum]).length)gets me 5, which is correct. so the problem seems to be with the nodeValue, but i'm not sure how and its the end of class so i have to go to second period. more when i get home. this seems awkard. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2009 Share Posted April 6, 2009 It wouldn't give an error if the nodeValue was the only thing that is undefined, it would just alert "undefined". Something else is still undefined, where it can't even get to the nodeValue because something else is undefined and the nodeValue doesn't even exist.You should probably install Firebug for Firefox and use the debug console. It would be good to print out everything you're using.console.log(SL);console.log(;console.log(SL);console.log(INum);console.log(Info[iNum]);console.log(SL.getElementsByTagName(Info[iNum]));console.log( C );console.log(SL.getElementsByTagName(Info[iNum])[C]);console.log(SL.getElementsByTagName(Info[iNum])[C].nodeValue); Link to comment Share on other sites More sharing options...
casper3912 Posted April 7, 2009 Author Share Posted April 7, 2009 i was able to get the first segment of the table to show i changed XMLTextValue intovar XMLTextValue= SL.getElementsByTagName(Info[iNum])[C].firstChild.nodeValue;i was reading on W3 http://w3schools.com/htmldom/dom_nodes_info.asp" The nodeValue property specifies the value of a node. * nodeValue for element nodes is undefined * nodeValue for text nodes is the text itself * nodeValue for attribute nodes is the attribute value" i was trying to return the nodevalue of an element node, i needed the text node scripting/programing really is recursive, i think i've spent more time trying to debug this then typing it up. and i'm still not done debuging. thanks for helping me everybody i greatly appreciate it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.