Check Lists:Web/Dijit issues using DropDownButton

From PMISwiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Issue using dijit.form.DropDownButton

You should avoid to use the <button> tag for the dijit.form.DropDownButton.

While it works in some browsers (e.g. Firefox 3.6.20) it does not work in others:

  • Firefox 5 provides the error message: _12 undefined, _layoutWidget.xd.js
  • Crome provides the error message: No error message - but no display!
  • IE8 provides the error message: 'undefined' is null or not an object, _layoutWidget.xd.js

And for all tested browsers it is a fatal error: The hole page will not be shown at all.


Avoid to use the <button>:

<button data-dojo-type="dijit.form.DropDownButton">
            <!-- Text for the button -->
            <span>Login using TooltipDialog</span>
            <!-- The dialog portion -->
            <div data-dojo-type="dijit.TooltipDialog" id="ttDialog">
                <strong><label for="email_101" style="display:inline-block;width:100px;">Email:</label></strong>
                <input data-dojo-type="dijit.form.TextBox" id="email_101" />
                <br />
                <strong><label for="pass_101" style="display:inline-block;width:100px;">Password:</label></strong>
                <input data-dojo-type="dijit.form.TextBox" id="pass_101">
                <br />
                <button type="submit" onclick="alert('Logging in!');">Submit</button>
            </div>
</button>

Use the <div> insted:

<div data-dojo-type="dijit.form.DropDownButton">
            <!-- Text for the button -->
            <span>Login using TooltipDialog</span>
            <!-- The dialog portion -->
            <div data-dojo-type="dijit.TooltipDialog" id="ttDialog">
                <strong><label for="email_101" style="display:inline-block;width:100px;">Email:</label></strong>
                <input data-dojo-type="dijit.form.TextBox" id="email_101" />
                <br />
                <strong><label for="pass_101" style="display:inline-block;width:100px;">Password:</label></strong>
                <input data-dojo-type="dijit.form.TextBox" id="pass_101">
                <br />
                <button type="submit" onclick="alert('Logging in!');">Submit</button>
            </div>
</div>