10

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.

Improve this question
2
  • thanks for asking this, buddy - I ran into the same problem Commented Aug 27, 2010 at 16:56
  • 1
    I found this question searching for a solution to a related problem, where Chrome and FF would not display a disabled jQuery UI button as disabled (it looked just like an enabled button only you couldn't click it and tooltips on it didn't work), it only seemed to work as expected on Opera. After some fiddling around, it seems the "problem" was that I was using the "regular" jQuery's .attr('disabled', 'disabled') and .removeAttr('disabled') instead of jQuery UI's .button('option', 'disabled', aBoolean). Once I switched to the latter it worked across browsers. Hope that helps someone. Commented Dec 3, 2012 at 0:12

5 Answers 5

Reset to default
12

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

  1. 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.)
  2. Firefox remembers that the second <button> is disabled.
  3. 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">.
  4. 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:

  1. How Firefox remembers which elements are disabled. It's not taking into account dynamic elements. I suggest filing a bug with Mozilla for this.
  2. 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
5

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");
Improve this answer

4 Comments

Not sure what 'autocomplete' is supposed to do for a button - didn't work for me. I used $('button').removeAttr('disabled').button(); instead.
There have been a couple of versions of firefox since so this behavior may have changed but the autocomplete off seemed to prevent firefox's annoying habit of saving the state of controls when a page was refreshed
You can just set the autocomplete="off" attribute in the html markup.
@UberNeet: Yes, but for those of us who are not using HTML 5 yet and are conscious of standards, that attribute is invalid, whereas doing it via JS/jQuery isn't. Might be a semantic thing, but there you go :-)
0

Setting the Expires HTTP header to a date in the past, solved the problem for me in Firefox 6.0.

Improve this answer

Comments

0

Here is the solution I found works really well in all browsers...

I give each button (that can be disabled) a class 'js_submit'

I then re-enable any disabled buttons with class 'js_submit' on the pagehide event that fires when a page is unloaded.

I wrap the event assignment inside a try catch to prevent browsers that don't support this event from throwing an error (such as IE).

Here is the code:

<input id="button" type="button" value="Submit" class="js_submit" />


// Fix for firefox bfcache:
try {
    window.addEventListener('pagehide', PageHideHandler, false);
} catch (e) { }

//Fires when a page is unloaded:
function PageHideHandler() {
    //re-enable disabled submit buttons:
    $('.js_submit').attr('disabled', false);
}
Improve this answer

Comments

-2

In my case it was a Bootstrap bug

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn btn-primary btn-xs 
disabled" value="Add Appointment">

Instead it should have been 

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn-primary btn-xs 
disabled" value="Add Appointment">
Improve this answer

1 Comment

Please add this as comment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.