Solved

JavaScript Error IE only - Using YUI DataTable with XML

Posted on 2007-03-26
12
577 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now