Solved

JavaScript Error IE only - Using YUI DataTable with XML

Posted on 2007-03-26
12
581 Views
Last Modified: 2008-03-04
I am using the YUI Libray DataTable with XML and generating the XML via JDOM in a
Java Servlet. I got this working in Firefox without any errors, but
when I tested in IE7, the DataTable does not display and I get the
following JavaScript error:
'children' is null or not an object

My XML:
<?xml version="1.0" encoding="UTF-8"?>
<ResultSet>
<Result>
<ROUNDS>3</ROUNDS>
<USERNAME>testuser</USERNAME>
<BIRDIES>2</BIRDIES>
<PARS>13</PARS>
<BOGIES>28</BOGIES>
<DOUBLES>11</DOUBLES>
<GH>10</GH>
<FH>10</FH>
<PUTTS>108</PUTTS>
<SCORES>264</SCORES>
</Result>
</ResultSet>

My Javascript:

var myColumnHeaders = [
{key:"ROUNDS",text:"Rounds",type:"number",sortable:true},
{key:"USERNAME",text:"User",sortable:true},
{key:"BIRDIES",text:"Birdies",type:"number",sortable:true},
{key:"PARS",text:"Pars",type:"number",sortable:true},
{key:"BOGIES",text:"Bogies",type:"number",sortable:true},
{key:"DOUBLES",text:"Doubles",type:"number",sortable:true},
{key:"GH",text:"Greens",type:"number",sortable:true},
{key:"FH",text:"Fairways",type:"number",sortable:true},
{key:"PUTTS",text:"Putts",type:"number",sortable:true},
{key:"SCORES",text:"Scores",type:"number",sortable:true},
];
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

// Show over 1000 records
var myDataSource = new YAHOO.util.DataSource("/gw/LeagueStandings");

// Set the responseType as XML
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

// Define the data schema
myDataSource.responseSchema = {
resultNode: "Result", // Node name of each result item
fields:
["ROUNDS","USERNAME","BIRDIES","PARS","BOGIES","DOUBLES","GH","FH","PUTTS","SCOR\
ES"]
// Field names
};


var initialRequest = "get=all&output=xml";
var oConfigs = {
initialRequest:initialRequest,
pageCurrent: 1,
rowsPerPage: 25,
startRecordIndex: 1,
pageLinksLength: 10,
rowsPerPageDropdown: [25,50,100,500]
};
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet,
myDataSource, oConfigs);

I am using a Java Servlet to generate the XML. Any assistance would be
greatly appreciated. Thanks
0
Comment
Question by:fortneci
  • 7
  • 3
12 Comments
 
LVL 5

Expert Comment

by:Gitcho
ID: 18797837
this sounds like a tough one ... the ['children' is null or not an object] is an error I've received when the xml response was poorly formed.  Try confirming the XML output from the Java Servlet is formed properly - IE & firefox may be parsing the XML differently, so IE may not pick up on the complete XML document heirarchy.

You're using the firebug in firefox for this kind of debugging, right ? ;)  https://addons.mozilla.org/en-US/firefox/addon/1843
0
 

Author Comment

by:fortneci
ID: 18799763
I will run it through firebug and see if I get anything. I wasn't getting anything in the Firefox Error Console.
0
 

Author Comment

by:fortneci
ID: 18799889
When I call my servlet from IE it will return the XML. Is there a resource that I can use to verify the XML for well formed?

I didn't pick any errors up in Firebug. Below is a snippet of the servlet code that returns the XML.

            RStoXML rsxml = new RStoXML(results, "ResultSet", "Result");
            //create the XML from recordset
            Document jDOMDoc = rsxml.build();            
            results.close();
            XMLOutputter outputter = new XMLOutputter() ;
            rep.setContentType("text/xml");
            outputter.output( jDOMDoc, rep.getWriter() );
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:fortneci
ID: 18801362
Here is where I am at with this. If anyone has any other ideas, please share.

I have added a DocType to the XML that is being returned in the response, but still can't seem to pass a XML validator with this DTD and XML: Any Suggestions?

DTD:
<!ELEMENT ResultSet (Results*)>
<!ELEMENT Results ANY>
<!ELEMENT ROUNDS (#PCDATA)>
<!ELEMENT USERNAME (#PCDATA)>
<!ELEMENT BIRDIES (#PCDATA)>
<!ELEMENT PARS (#PCDATA)>
<!ELEMENT BOGIES (#PCDATA)>
<!ELEMENT DOUBLES (#PCDATA)>
<!ELEMENT FH (#PCDATA)>
<!ELEMENT GH (#PCDATA)>
<!ELEMENT PUTTS (#PCDATA)>
<!ELEMENT SCORES (#PCDATA)>

XML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ResultSet SYSTEM "DTDresultset.dtd">
<ResultSet>
<Result>
<ROUNDS>3</ROUNDS>
<USERNAME>testuser</USERNAME>
<BIRDIES>2</BIRDIES>
<PARS>13</PARS>
<BOGIES>28</BOGIES>
<DOUBLES>11</DOUBLES>
<GH>10</GH>
<FH>10</FH>
<PUTTS>108</PUTTS>
<SCORES>264</SCORES>
</Result>
</ResultSet>

Also, I am still getting the errror in IE and no errors in FireBug
0
 

Author Comment

by:fortneci
ID: 18801718
Ok, I got this to return valid XML, but I AM STILL GETTING 'children' is null or not an object ERROR in IE. Below is the new XML and DTD

DTD
<!ELEMENT ResultSet (Result)>
<!ELEMENT Result ANY>
<!ELEMENT ROUNDS (#PCDATA)>
<!ELEMENT USERNAME (#PCDATA)>
<!ELEMENT BIRDIES (#PCDATA)>
<!ELEMENT PARS (#PCDATA)>
<!ELEMENT BOGIES (#PCDATA)>
<!ELEMENT DOUBLES (#PCDATA)>
<!ELEMENT FH (#PCDATA)>
<!ELEMENT GH (#PCDATA)>
<!ELEMENT PUTTS (#PCDATA)>
<!ELEMENT SCORES (#PCDATA)>

XML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ResultSet SYSTEM "DTDresultset.dtd">
<ResultSet>
<Result>
<ROUNDS>3</ROUNDS>
<USERNAME>testuser</USERNAME>
<BIRDIES>2</BIRDIES>
<PARS>13</PARS>
<BOGIES>28</BOGIES>
<DOUBLES>11</DOUBLES>
<GH>10</GH>
<FH>10</FH>
<PUTTS>108</PUTTS>
<SCORES>264</SCORES>
</Result>
</ResultSet>
0
 
LVL 5

Expert Comment

by:Gitcho
ID: 18801806
Do you still get the error when you strip out the <!DOCTYPE ResultSet SYSTEM "DTDresultset.dtd"> ?
0
 

Author Comment

by:fortneci
ID: 18804657
Yes, because the <!DOCTYPE ResultSet SYSTEM "DTDresultset.dtd"> wasn't originally in the XML. I added the DOCTYPE after I explored the option that my XML was malformed and I used a XML validator to validate this XML with this DTD.
0
 
LVL 5

Expert Comment

by:Gitcho
ID: 18805730
Nothing in your code is jumping out at me - syntax looks OK .... i can suggest hard coding an xml flat file (with the least amount of code necessary) and point yui to the file instead to see if the error has anything to do with the servelet output.
0
 

Author Comment

by:fortneci
ID: 18811103
Thanks, I haven't tried that yet with the properly formatted XML, I will give that a try and let you know. I have hit a wall with this, so any suggestions are good suggestions. Thanks
0
 

Author Comment

by:fortneci
ID: 18837582
Found the error. It was in the Javascript, an extra comma at the end of the myColumnHeaders array. Here is the updated Javascript.

var myColumnHeaders = [
{key:"ROUNDS",text:"Rounds",type:"number",sortable:true},
{key:"USERNAME",text:"User",sortable:true},
{key:"BIRDIES",text:"Birdies",type:"number",sortable:true},
{key:"PARS",text:"Pars",type:"number",sortable:true},
{key:"BOGIES",text:"Bogies",type:"number",sortable:true},
{key:"DOUBLES",text:"Doubles",type:"number",sortable:true},
{key:"GH",text:"Greens",type:"number",sortable:true},
{key:"FH",text:"Fairways",type:"number",sortable:true},
{key:"PUTTS",text:"Putts",type:"number",sortable:true},
{key:"SCORES",text:"Scores",type:"number",sortable:true}
];
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

// Show over 1000 records
var myDataSource = new YAHOO.util.DataSource("/gw/LeagueStandings");

// Set the responseType as XML
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

// Define the data schema
myDataSource.responseSchema = {
resultNode: "Result", // Node name of each result item
fields:
["ROUNDS","USERNAME","BIRDIES","PARS","BOGIES","DOUBLES","GH","FH","PUTTS","SCOR\
ES"]
// Field names
};

0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 19544720
PAQed with points refunded (500)

Computer101
EE Admin
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html CheckBox obtain Its Value 5 27
Add or delete table rows 10 53
Search Item in Table 2 19
ASP.NET MVC -Update model when click on <li> element 29 30
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question