Jquery UI button gets disabled on refresh -
i asked on jquery forum few weeks ago without luck, try again here :)
i've made simple widget project i'm working on, have encountered odd problem.
it easiest explain example implementation. http://decko.dk/buttontest
on page there 3 button. first 1 drop down widget. next 1 regular disabled button (a) , last 1 regular enabled button (b). if refresh page (press f5 or whatever) enabled button mysteriously disabled. have no clue why happens, if button not disabled begin with, button b not disabled when refreshing. also, if remove call insertafter in widget-code, button not disabled. can shed light on why strange behavior occurs?
by way, have been able reproduce in firefox.
i believe bug in how firefox remembers form field/control values , states:
- after first page load, there 3
<button>
elements in document, ,<button id="button_a">
disabled. (when jquery ui styled button enabled or disabled, sets underlying element same state.) - firefox remembers second
<button>
disabled. - after page refresh, before scripts run, firefox restores form fields , controls. disables second
<button>
, since no script has been run, second button<button id="button_b">
. - when jquery ui creates styled button
<button id="button_b">
, sees disabled , continues style disabled.
there 2 issues here:
- how firefox remembers elements disabled. it's not taking account dynamic elements. suggest filing bug mozilla this.
- form elements stay disabled after page refresh. i'm not sure if correct behaviour, there 2 bugzilla reports on this.
the test case can simplify down adding <button>
element dynamically , disabling <button id="button_a">
, no jquery / jquery ui necessary:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>disabled button test</title> <script type="text/javascript"> window.onload = function () { var = document.getelementbyid('button_a'), menu = document.createelement('button'); menu.appendchild(document.createtextnode('menu')); document.body.insertbefore(menu, a); a.disabled = true; }; </script> </head> <body> <button id="button_a">a</button> <button id="button_b">b</button> </body> </html>
Comments
Post a Comment