Dojo: declarative widgets and XHTML validation
January 02, 2012Tested with: Dojo Toolkit 1.7.1
The problem
Suppose that we have a page in which we have used a dijit widget exploiting the declarative way and we have to validate the page against a XHTML DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dojo W3C Validation</title>
<link
rel="stylesheet"
type="text/css"
href="dojo/dijit/themes/claro/claro.css"
/>
</head>
<body class="claro">
<div>
<button data-dojo-type="dijit.form.Button">Click me!</button>
</div>
<script type="text/javascript">
//<![CDATA[
var dojoConfig = { parseOnLoad: true };
//]]>
</script>
<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.form.Button");
//]]>
</script>
</body>
</html>
This code is wrong for the W3C Validator because of the data-dojo-type attribute (that is valid in HTML5).
A solution
In order to pass the validation we can use an elegant tricks. For instance, we can replace the data-dojo-type attribute with
<button class="foo">Click me!</button>
and instead of dojo.require("dijit.form.Button") we have to write
dojo.addOnLoad(function() {
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
dojo.query(".foo").instantiate(dijit.form.Button, { delay: 50 });
});
});