View Full Version : Grid contents garbled when document.domain has been set (FF)

18 Jan 2007, 3:00 PM
When I include the Data grid in a page that uses document.domain, the contents look garbled in Firefox 1.5 or Firefox 2.0. (it looks fine in IE). We are trying to integrate the data grid in one of our company's pages, and that page requires to set document.domain.

Below is a quick example to reproduce the problem.

Note: For simplicity, in this example I am creating the XML document from a string using the Mozilla-only DomParser object.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML Grid Example</title>

<script type="text/javascript" src="du_main2.js"></script>
<link rel="stylesheet" type="text/css" href="grid.css" />
<script type="text/javascript" src="cssQuery.js"></script>
<script type="text/javascript">
var XmlExample = {
init : function(){

var schema = {
tagName: 'employee',
id: 'emplid',
fields: ['lastname', 'name', 'emplid']

var xmldoc="<?xml version='1.0' encoding='UTF-'?><table><employee><emplid>100</emplid><name>Bob</name><lastname>Bug</lastname></employee><employee><emplid>200</emplid><name>Sally</name><lastname>Simple</lastname></employee></table>";
var xml = (new DOMParser()).parseFromString(xmldoc, 'text/xml');
dataModel = new YAHOO.ext.grid.XMLDataModel(schema, xml);

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Last Name", width: 120, sortable: true},
{header: "First Name", width: 180, sortable: true},
{header: "EMPLID", width: 115, sortable: true}

// create the Grid
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
grid.autoWidth = true;
grid.autoHeight = true;
<div onclick="XmlExample.init();">click me</div>
<div id='example-grid' style="width:450px"></div>

If you comment the document.domain line, the datagrid will display correctly[/code]

18 Jan 2007, 3:11 PM
I'm not sure what you're trying to accomplish by setting document.domain. My guess would be that it's causing js and/or css files to not be found. Use a debugger to verify that all your components are being loaded.

18 Jan 2007, 3:35 PM
Looking at the DOM Inspector, I noticed that the style.left and style.width for the span where the rows are rendered are not being set when document.domain is being set in the javascript.

I tried pasting the contents of grid.css directly on my page, but the problem still exist

18 Jan 2007, 4:42 PM
I am not getting any errors in the Javascript Console (I am using Firebug as well). My guess is that the YUI-Ext library .js is catching the errors, but I haven't look at the code closely.

18 Jan 2007, 4:59 PM
use the -debug.js file and wrap your code with try/catch so you can see the error

18 Jan 2007, 7:41 PM
I switched to all the -debug libraries, and I am not getting any errors, but the bug still persists.

You can check it here:

using document.domain

The page displays correctly in IE, but not in FireFox.

As a reference, when document.domain is not being used, the page displays correctly in both Firefox and IE.


18 Jan 2007, 7:49 PM
FYI, it works fine when accessing it via http://climbforacause.org/bugtest/examples/grid/grid-domain.html. Notice the lack of "www." in the URL. I don't know what about the JS or CSS is failing, but clearly document.domain must *exactly* match the domain of the site.

19 Jan 2007, 8:27 AM
I found out that commenting the following lines from grid.css file has the same effect as setting document.domain in the page



Apparently when those classes are not present the width for the columns is being set to 0px and that's why in each row the text appears in the same column.

My next attempt was to add those css class definitions directly in the html file, but the table still displayed incorrectly. Interestingly enough, when I added the css classes directly in the page, if I changed the color for the cell, the color changed, but the width bug still persisted!



I also tried adding width:100px to those classes, but that didnt' make a difference.

p.s. Changing document.domain is not a possibility for me, since it is not set by me, but rather automatically by a Peoplesoft Portal where I am using the grid.[/code]

19 Jan 2007, 9:04 AM
The GridView modifies the CSS rules for the columns.

I'm not following the discussion fully, but could it be a security problem caused by trying to update the rules?

Ext 0.40 should not exhibit this behaviour because it creates private stylehseets to contain the grid column class settings.

19 Jan 2007, 9:40 AM
Additionally, while you may not maintain the document.domain bit, there's most likely something you can do to ensure that the domain the user is visiting with actually matches what document.domain is set to (ie, by redirecting them server-side or client-side).

19 Jan 2007, 9:57 AM
I found the particular Firefox bug why it is not working :(


It turns out that Firefox throws a security error when trying to access cssRules if document.domain has been set.

cssRules is being accesed in the YAHOO.ext.util.CSS.getRules function (lines 794-809 of yui-ext-debug):

this.getRules = function(refreshCache){
if(rules == null || refreshCache){
rules = {};
var ds = document.styleSheets;
for(var i =0, len = ds.length; i < len; i++){
var ss = ds[i];
var ssRules = ss.cssRules || ss.rules;
for(var j = ssRules.length-1; j >= 0; --j){
rules[ssRules[j].selectorText] = ssRules[j];
return rules;

If I comment that try/catch block, I get the error:
"uncaught exception: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"

by private stylesheets you mean that 0.40 does not need to access document.Stylesheets? Otherwise I think the error would still persist

19 Jan 2007, 10:11 AM
by private stylesheets you mean that 0.40 does not need to access document.Stylesheets? Otherwise I think the error would still persist

No, the change in .40 Animal is referring to, is to create the css rules for the grids cols on the fly (in private stylesheets) so that you don't need to add all the dummy column placeholders in your css.

19 Jan 2007, 11:02 AM
Yes, but it will use the document.styleSheets collection.

YAHOO.ext.util.CSS contains this:

this.createStyleSheet = function(cssText){
var ss;
ss = document.createStyleSheet();
ss.cssText = cssText;
var head = document.getElementsByTagName("head")[0];
var rules = document.createElement('style');
rules.setAttribute('type', 'text/css');
rules.cssText = cssText;
ss = document.styleSheets[document.styleSheets.length-1];
return ss;

I'm sure it could use

ss = return rules.styleSheet ? rules.styleSheet : rules.sheet;

rather than accessing the last element of the document.styleSheets collection. Jack - will that work to avoid this Moz problem?

For noe, see if the code in this thread works for you: http://www.yui-ext.com/forum/viewtopic.php?t=1038

20 Jan 2007, 5:51 AM
I made the change Animal:

ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);

It falls back on the old way just in case.

20 Jan 2007, 8:02 AM
Thank you all for your responses! :)

I'll try 0.40 when it's ready and report back if I find any problems! In the mean time, it looks like that we will be using an iframe to get around this issue...