Dojo and XML-XSL-Transformation problems with FF

Can you be more specific?

Submitted by ttrenka on Thu, 10/25/2007 - 15:03.

Which components are you talking about? And what version of Dojo are you using? IIRC, I haven't ported any of the 0.4 XSL code to 0.9+ yet (and won't before the 1.0 release, just no time), and there's an outstanding bug that describes a similar problem with FF.

If you're talking about 0.4, then I hate to say it but we aren't really supporting that version any more...which means you'll need to figure out a fix on your own. If it's post 0.9, we might be able to help a bit but again we'll need some more specifics on what you're trying to do...

(WRT to the white screen of death, odds are it's because you're a first time user and Akismet holds the first post in moderation until one of the admins come and publish it; we need to add something to the posting page to warn you about that...)

Login or register to post comments

"more specific" - I'll try...

Submitted by z320 on Fri, 10/26/2007 - 01:13.

I'll try to explain the problem with the help of an example. Therefore I'd downloaded the latest version of dojo 0.9. All that I speak and spoke about relates to the version 0.9 of the dojo toolkit.
Ok, let's go. I installed the dojo package into my project folder and created three new files. The 'test.html', that contains simple html code. When I try to call it (test.html) it simply works without any problems.
Furthermore I created the files 'test.xml' and 'test.xsl'. These both contains XML and XSLT specific code. The XML file contains a reference to the XSL file, and so the data will be transformed by the browser into XHTML code (XML + XSL >> XHTML). When I call the test.xml file the 'TitlePane', the 'TextBox', the 'Button' and the 'Dialog' will be ignored by the dojo parser. They just looks rudimentary. I think the problem is that the FF and the Opera browser converts all tags into lowercase because of XHTML compatibility (Element and attribute names must be in lower case). That means, the "dojoType" tag will be converted to "dojotype" by FF and Opera and so the parser don't find it anymore. The IE browser ignores this spezification and don't convert the tag names - and that's why it works with microsofts' browser.

structure of my project folder

[-] dojo
 |- [-] js
 |   |- [+] dijit
 |   |- [+] dojo
 |   |- [+] dojox
 |   `- [+] util
 |- test.html
 |- test.xml
 `- test.xsl

content of the 'test.html'

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<title>Dojo and HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" language="JavaScript" src="js/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: false"></script>
<script type="text/javascript" language="JavaScript">
dojo.require('dijit.TitlePane');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.Dialog');
dojo.require('dojo.parser');
</script>
<style type="text/css">
@import url(js/dojo/resources/dojo.css);
@import url(js/dijit/themes/tundra/tundra.css);
</style>
<script type="text/javascript" language="JavaScript">
function Init() {
dojo.parser.parse('body');
dojo.byId('input_name').focus();
};
function OpenDialog() {
dojo.byId('label').innerHTML = dojo.byId('input_name').value;
dijit.byId('dialog').show();
}
window.onload = function() {
Init();
};
</script>
</head>
<body class="tundra">
<div dojoType="dijit.TitlePane" id="pane" title="Pane #1" style="width:320px;height:240px;">
<input type="text" dojoType="dijit.form.TextBox" id="input_name" value="Blubb"/>
<input type="text" dojoType="dijit.form.TextBox" id="input_age" value="25"/>
<button type="button" dojoType="dijit.form.Button" id="button" onclick="OpenDialog();">Dojo-Button</button>
</div>
<div dojoType="dijit.Dialog" id="dialog" title="Dialog 1">
hello <span id="label"/>
</div>
</body>
</html>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

^-= This works fine and without any problems in all browsers (FF 2.0.0.8, Opera 9.24 and IE 6 and 7).



====================================================================================================

content of the 'test.xml'

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl" standalone="no"?>
<root>
<name>Blubb</name>
<age>25¾</age>
</root>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

content of the 'test.xsl'

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2004/10/xpath-functions" xmlns:xdt="http://www.w3.org/2004/10/xpath-datatypes">
<xsl:output version="1.0" method="html" encoding="ISO-8859-1" indent="no" omit-xml-declaration="yes" media-type="text/html"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dojo and XML-XSL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<script type="text/javascript" language="JavaScript" src="js/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: false"></script>
<script type="text/javascript" language="JavaScript">
dojo.require('dijit.TitlePane');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.Dialog');
dojo.require('dojo.parser');
</script>
<style type="text/css">
@import url('js/dojo/resources/dojo.css');
@import url('js/dijit/themes/tundra/tundra.css');
</style>
<script type="text/javascript" language="JavaScript">
function Init() {
dojo.parser.parse('body');
dojo.byId('input_name').focus();
};
function OpenDialog() {
dojo.byId('label').innerHTML = dojo.byId('input_name').value;
dijit.byId('dialog').show();
}
window.onload = function() {
Init();
};
</script>
</head>
<body class="tundra">
<div dojoType="dijit.TitlePane" id="pane" title="Pane #1" style="width:320px;height:240px;">
<input type="text" dojoType="dijit.form.TextBox" id="input_name">
<xsl:attribute name="value"><xsl:value-of select="root/name"/></xsl:attribute>
</input>
<input type="text" dojoType="dijit.form.TextBox" id="input_age">
<xsl:attribute name="value"><xsl:value-of select="root/age"/></xsl:attribute>
</input>
<button type="button" dojoType="dijit.form.Button" id="button" onclick="OpenDialog();">Dojo-Button</button>
</div>
<div dojoType="dijit.Dialog" id="dialog" title="Dialog 1">
hello <span id="label"/>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

content of the generated result file 'result.html'

(generated by Firfox 2.0.0.8)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<html class="dj_gecko" lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>Dojo and XML-XSL</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script djconfig="isDebug: true, parseOnLoad: false" src="js/dojo/dojo.js" language="JavaScript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
dojo.require('dijit.TitlePane');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.Dialog');
dojo.require('dojo.parser');
</script>
<style type="text/css">
@import url('js/dojo/resources/dojo.css');
@import url('js/dijit/themes/tundra/tundra.css');
</style>
<script language="JavaScript" type="text/javascript">
function Init() {
dojo.parser.parse('body');
dojo.byId('input_name').focus();
};
function OpenDialog() {
dojo.byId('label').innerHTML = dojo.byId('input_name').value;
dijit.byId('dialog').show();
}
window.onload = function() {
Init();
};
</script>
</head>
<body class="tundra">
<div style="width: 320px; height: 240px;" title="Pane #1" id="pane" dojotype="dijit.TitlePane">
<input value="Blubb" id="input_name" dojotype="dijit.form.TextBox" type="text"><br>
<input value="25¾" id="input_age" dojotype="dijit.form.TextBox" type="text"><br><br>
<button onclick="OpenDialog();" id="button" dojotype="dijit.form.Button" type="button">Dojo-Button</button>
</div>
<div title="Dialog 1" id="dialog" dojotype="dijit.Dialog">
hello <span id="label"></span>
</div>
<div style="border-style: solid; border-color: red green; border-width: 1px; position: absolute; left: -999px; top: -999px; background-image: url(js/dijit/form/templates/blank.gif);" id="a11yTestNode"></div>
</body>
</html>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

^-= This only works with IE 6 and 7, but not so with FF (v2.0.0.8) and Opera (v9.24). Have a look at the "djconfig"- and "dojotype"-Tags. They're all converted to lowercase - and that's the problem.

I hope this explanation is helpfull

best regards, z320 ;)

Login or register to post comments

Gotcha.

Submitted by ttrenka on Fri, 10/26/2007 - 15:44.

...this is a problem that Alex is going to have to look at; I don't know that we anticipated someone trying to use XML/XSL natively to build a page using Dojo on it (though I could be entirely wrong about that).

I don't remember XHTML requiring that all attributes need to be lowercase though, just the ones that are part of the XHTML spec. We *did* eliminate XML namespacing for 0.9; the thought there was that the use case you are describing is pretty rare, and we made a decision to cut that part of the code out in favor of performance and download size of the code.

Perhaps we should look at either putting it back, or extending the parser to handle the case after the 1.0 release.

Login or register to post comments

Ouch, it's a problem for me too

Submitted by Si on Mon, 10/29/2007 - 17:26.

I was hoping my Dojo app could pull in XML documents and style them via XSLT into editing forms with fields bound to the data. I've added something to Trac.

Login or register to post comments

Search