Dojo: declarative widgets and XHTML validation

January 02, 2012

Tested 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 });
    });
});

References

Did you find this post useful? What about