Jquery UI button gets disabled on refresh

jquery-ui, jquery-ui-button

Solution

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">
<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>

Problem

I asked about this on the jquery forum a few weeks ago without luck, so I will try again here :) I've made a simple widget for a project I'm working on, but I have encountered an odd problem. It is easiest to explain it with an example implementation. http://decko.dk/buttontest On the page there are 3 button. The first one is my drop down widget. The next one is a regular disabled button (A) and the last one a regular enabled button (B). If you then refresh the page (press F5 or whatever) the enabled button is mysteriously now disabled. I have no clue why this happens, but if button A is not disabled to begin with, button B will not be disabled when refreshing. Also, if I remove the call to insertAfter in my widget-code, the button will not be disabled. Can anyone shed light on why this strange behavior occurs? By the way, I have only been able to reproduce this in Firefox.

Original source