Check Lists:Web/Dijit issues using DropDownButton: Difference between revisions

From PMISwiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 44: Line 44:
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>
[[Category:software development]]
[[Category:Dojo]]
[[Category:HTML5]]
[[Category:Dijit]]
[[Category:dijit.form]]
[[Category:dijit.form.DropDownButton]]

Latest revision as of 01:55, 16 November 2011

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>