PDA

View Full Version : Trouble getting started with Grid and XML



Rich
16 Nov 2006, 1:24 PM
I'm trying to implement a grid to display XML data, using the http://www.jackslocum.com/yui/2006/08/31/a-grid-component-for-yahoo-ui-part-2/ example as a starting point.

I've created a simple page with the code, here:

http://richgay.com/test/gridtest.html

The page loads and the grid header displays, but no rows, and an error in Firefox 2.0/Mac:


Error: junk after document element
Source File: http://richgay.com/test/serverconfigdata.xml
Line: 8, Column: 1
Source Code:
<item>^

With Safari, the header and first row displays, and there is no error displayed in the Javascript console.

No doubt I've made a fundamental mistake... thanks in advance for any help.

tryanDLS
16 Nov 2006, 3:16 PM
Is the xml valid? Maybe just a stray quote? If you open the xml file in IE, does it choke?

Rich
16 Nov 2006, 4:07 PM
Is the xml valid? Maybe just a stray quote? If you open the xml file in IE, does it choke?

You were on the right track. The XML for the items needed to be wrapped. It's working now.

Rich
17 Nov 2006, 11:17 AM
I'm trying to modify my grid to load the XML data from a hidden div in the page, rather than issue a separate page request.

Previously, to load the xml from a document, I used:


this.dataModel.load('serverconfigdata.xml');

I've changed to this:


var myXMLdiv = document.getElementById ("xmlcontent");
var myXMLcontent = myXMLdiv.innerHTML;
this.dataModel.loadData (myXMLcontent);

I'm getting this error in the yui-ext library:


Error: doc.getElementsByTagName is not a function
Source File: http://richgay.com/test/scripts/yui-ext.0.33-rc1/yui-ext.js
Line: 482

I'm certain I'm doing something incorrectly here...

Page with the code is here:

http://richgay.com/test/gridtest.html

Animal
17 Nov 2006, 11:34 AM
Off the top of my head, try



this.dataModel.loadData (myXMLcontent.documentElement);

Rich
17 Nov 2006, 11:43 AM
Off the top of my head, try



this.dataModel.loadData (myXMLcontent.documentElement);


No success, but a different error reported:


Error: doc has no properties
Source File: http://richgay.com/test/scripts/yui-ext.0.33-rc1/yui-ext.js
Line: 482

Animal
17 Nov 2006, 11:46 AM
Stop in the Connection object and take a look at the XmlHttpRequest's properties.

It's a very fussy XML parser, and it gives you a null document if anything's wrong.

Animal
17 Nov 2006, 11:49 AM
Oh, I just saw that you're passing in HTML from a div. Are you sure that the browser is preserving the XML that you put there?

I think the only way to preserve XML text in an HTML document is to send it out inside a textbox. Then you can get the value of that.

Rich
17 Nov 2006, 12:03 PM
Oh, I just saw that you're passing in HTML from a div. Are you sure that the browser is preserving the XML that you put there?

It appears to be correct. If I view the source of the page, it appears intact.


I think the only way to preserve XML text in an HTML document is to send it out inside a textbox. Then you can get the value of that.

I'll give that a try... after lunch.

Thanks for the suggestions!

Rich
17 Nov 2006, 2:28 PM
I've modified the included XML to be wrapped with an <xml> tag, and verified the content is included and correct. Still getting this error:


Error: doc.getElementsByTagName is not a function
Source File: http://richgay.com/test/scripts/yui-ext.0.33-rc1/yui-ext.js
Line: 482

tryanDLS
17 Nov 2006, 2:51 PM
Your xml is not valid. Remove the trailing </xml> tag.

Rich
17 Nov 2006, 4:36 PM
Your xml is not valid. Remove the trailing </xml> tag.

Removing the trailing </xml> doesn't help... nor would I expect it to, as the initial <xml> tag needs to be terminated.

tryanDLS
17 Nov 2006, 4:44 PM
I don't think so. If you save the xml as file and open in IE it will give an error parsing about halfway thru. If you remove the ending tag and reload, IE will parse the entire file.

I took your xml into my grid sample, changed the datamodel columns to match your node names and it worked fine. Here's my code.

One caveat: I've only included the FF XML parser. You'll have to add the IE one if you want to test it that way too.




<body>
<div id="exGrid" style="width:80%"></div>
</body>
var data = '<?xml version="1.0" encoding="UTF-8"?><stuff><item><id>1</id><category>.....'; // <!--- no ending xml tag

var test = {

init : function(){

var dm, cm, sm, schema;
function formatDate(val){
return (val && val.format) ? val.dateFormat('M j, Y, g:i a') : 'Not Available';
};

function parseDate(feedDate){
return new Date(Date.parse(feedDate));
};

cm = new YAHOO.ext.grid.DefaultColumnModel(
[{header: "Col1", width: 200, sortable: true},
{header: "Col2", width: 150, sortable: true},
{header: "Col3", width: 125, sortable: true},
{header: "Col4", width: 125, sortable: true}
]);

schema = {
tagName: 'item',
id: 'use-index',
fields: ['id', 'category', 'name', 'value']
};

var xml = (new DOMParser()).parseFromString(data, 'text/xml');
dm = new YAHOO.ext.grid.XMLDataModel(schema, xml);

// dm.addPreprocessor(2, parseDate); // add preprocessor to col2 to parse dates
dm.onLoad.subscribe(this.onLoad.createDelegate(this));
dm.onLoadException.subscribe(this.showError.createDelegate(this));
dm.setDefaultSort(cm, 2, 'DESC');

// create single selection model
sm = new YAHOO.ext.grid.SingleSelectionModel();
this.grid = new YAHOO.ext.grid.Grid('exGrid', dm, cm, sm);
this.grid.render();
},

showError : function(model, error, response){
alert(error);
},

onLoad : function(){
alert('loaded');
}
}
YAHOO.ext.EventManager.onDocumentReady(test.init, test, true);

Animal
18 Nov 2006, 12:14 AM
<?xml...>

Is not a tag and doesn't have to be terminated.

jack.slocum
18 Nov 2006, 2:55 AM
The problem is he is passing in a string.

var myXMLdiv = document.getElementById ("xmlcontent");
var myXMLcontent = myXMLdiv.innerHTML;
this.dataModel.loadData (myXMLcontent);

and loadData expects an XML document. So doc would be a string and getElementsByTagName() is not defined on a string.

This is totally unsupported and non standard, but none-the-less you could try this:

var myXMLdiv = document.getElementById ("xmlcontent");
this.dataModel.loadData(myXMLdiv );

I'd be interested to know if it works.

Rich
18 Nov 2006, 4:45 PM
The problem is he is passing in a string.

var myXMLdiv = document.getElementById ("xmlcontent");
var myXMLcontent = myXMLdiv.innerHTML;
this.dataModel.loadData (myXMLcontent);

and loadData expects an XML document. So doc would be a string and getElementsByTagName() is not defined on a string.

This is totally unsupported and non standard, but none-the-less you could try this:

var myXMLdiv = document.getElementById ("xmlcontent");
this.dataModel.loadData(myXMLdiv );

I'd be interested to know if it works.

Yes, that works!

Thanks Jack.