ansaurus

Question

Jquery UI button gets disabled on refresh

Answer 1

+3 A:

I believe this is a bug in how Firefox remembers form field/control values and states:

After the first page load, there are three <button> elements in the document, and <button id="button_a"> is disabled. (When the jQuery UI styled button is enabled or disabled, it sets the underlying element to the same state.)
Firefox remembers that the second <button> is disabled.
After a page refresh, before any scripts are run, Firefox restores form fields and controls. It disables the second <button>, but since no script has been run, the second button is <button id="button_b">.
When jQuery UI creates the styled button for <button id="button_b">, it sees that it is disabled and continues to style it as disabled.

There are two issues here:

How Firefox remembers which elements are disabled. It's not taking into account dynamic elements. I suggest filing a bug with Mozilla for this.
Form elements stay disabled after a page refresh. I'm not sure if this is the correct behaviour, but there are two bugzilla reports on this.

The test case can simplify down to just adding a <button> element dynamically and 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"&gt;
<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 a = 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>

Jeffery To 2010-04-27 09:52:38

That was what I was thinking as well but hoped it was a jquery bug (as this would be a lot easier to fix). But with the code you show it is absolutely a "caching" bug in Firefox.

Decko 2010-04-27 11:34:35

Answer 2

A:

I've been getting this problem also and worked out it was down to silly behaviour in firefox, my fix was as so:

before:

//set up the buttons
$("button").button();

after:

//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");

Chris Simpson 2010-10-15 22:45:55

ansaurus

tags:

views:

answers:

Jquery UI button gets disabled on refresh

related questions