DateTextBox appear as a text box with an 'X' on the side

Submitted by gus_wilhelmsson on Mon, 01/14/2008 - 08:24.

I'm porting Dojo from 0.4 to 0.9 and have ran into a strange problem. I have a date picker on my page and I've changed it from dojo.widget.DropdownDatePicker to dijit.form.DateTextBox as described on http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/datepic.... However the graphical component gets totally messed up and it appear as a text box with an 'X' on the right side. I can see that it recognize the type as when I click on the DateTextBox or on the 'X' the date picker appear at the buttom of the page in text representation (that I can indeed use to pick a date). I've compared my code to the example on http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-s... but still haven't managed to find out what I've done wrong.

I have a custom build of Dojo where dojo_custom.js includes DateTextBox.

My code looks like this:

<head>
<title>DateTextBox test</title>
<link rel="stylesheet" type="text/css" href="Dojo/themes/tundra/tundra.css">
<script type="text/javascript" src="Dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type='text/javascript' src='Dojo/dijit.js'></script>
<script type='text/javascript' src='Dojo/dojo_custom.js'></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
</script>
</head>
<body>
<table>
<tr>
<td style="padding-top:5px; padding-left:5px;">DateTextBox test from Dojo page</td>
<td style="padding-top:5px; padding-left:5px;">
<input id="q14b" type="text" name="date1" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
lang="en-us"
required="true"
promptMessage="mm/dd/yyyy"
invalidMessage="Invalid date. Use mm/dd/yyyy format." />
</td>
</tr>
</table>
This example is found on <a href="http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/datepicker">http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/datepicker</a>
</body>

Thanks in advance!

Gustav

Login or register to post comments
Unsubscribe post

the paths look slightly

Submitted by dante on Mon, 01/14/2008 - 12:22.

the paths look slightly wrong. The most common thing when widgets aren't rendering is the lack of appropriate css files being loaded (which 0.9+ no longer does for you). Instead, the tundra theme is the default

your dojo.js is allegedly in the path Dojo/ ... the typical use would be something like js/dojo/dojo.js , where dijit and dojox are sibling folders to dojo/ ... the theme file would bs/dijit/themes/tundra/tundra.css (you have Dojo/themes/tundra/tundra.ss)

so just double check everything is in the right path, and being loaded (no 404's or other console errors) ...

oh, and put as your body tag to enable the tundra theme throughout the document.

Thanks for your help

Submitted by gus_wilhelmsson on Tue, 01/15/2008 - 07:40.

Thanks for your fast reply and for getting me back on the right track. My strange behaviour was due to two things:

My development path and the one that I run from is not the same. I'd made the stupid misstake to copy the themes directory only to the development path. My paths were correct, however I guess that would've revealed itself in the same way. What is really strange is that neither the Firefox error console, nor Firebug said that there was any problem.
My second misstake was that I'd missed to put . Before I did this the DateTextBox was rendered, although it was transparent, because no theme was connected to it. What strikes me as odd is that one don't get this transparent component when the stylesheet cannot be found.

Gustav

Search