Rolf Kremer

Archive for September 19th, 2010

Dojo Toolkit and XHTML

with 2 comments

I had added > Dojo widgets to a website. After that, the markup was not > XHTML valid. I searched the internet and found a following solution for that problem. The main problem is, that you can use Dojo-specific html tags. Examples:

  • If you configure the Dojo parser, you can add the ‘djConfig’ tag, which is unknown by the XHTML dtd. For example, you can add ‘djConfig=”parseOnLoad:false’.
  • If you use widgets, you have the possibility to define the widgets via markup. The tag ‘dojoType’ is also unknown by the XHTML DTD.

Instead of using the markup tags, you have to add the widgets programmatically. The following script is an excerpt which shows, how a dialog can be added programmatically without damage the XHTML validation. It shows the page “dialog.html” in the dialog, if the user clicks on a link.

1. Load the Dojo javascript and css files:

<script type="text/javascript" src="http://.../dojo/dojo.xd.js" ></script>
<link type="text/css" rel="stylesheet" href="http://.../tundra.css"/>

2. Define the dialog in the addOnLoad event:

<script type="javascript">
  dojo.addOnLoad(function() {
     // create the dialog
     dialog = new dijit.Dialog({
        id: "dialog",
        style: "width: 200px; height: 240px;"

3. Define a javascript function to call the dialog and set the attributes:

  function showDialog() {
     dialog.attr("title", "Dialog Title");
     dialog.attr("href", "dialog.htm");;



4. Add the link to open the dialog:

<a href="javascript:showDialog();">Click on me</a>

Finally, you can verify the page with the > Unicorn validator.

Written by rkremer

September 19, 2010 at 4:33 pm

Posted in Development

Tagged with ,