Check Lists:Web/Dijit issues using DropDownButton

From PMISwiki
Jump to navigation Jump to search

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>