asked on

JavaScript Error IE only - Using YUI DataTable with XML

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

Gitcho

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

fortneci

ASKER

I will run it through firebug and see if I get anything. I wasn't getting anything in the Firefox Error Console.

fortneci

ASKER

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() );

fortneci

ASKER

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

fortneci

ASKER

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>

Gitcho

Do you still get the error when you strip out the <!DOCTYPE ResultSet SYSTEM "DTDresultset.dtd"> ?

fortneci

ASKER

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.

Gitcho

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.

fortneci

ASKER

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

fortneci

ASKER

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
};

ASKER CERTIFIED SOLUTION

Computer101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial