Jquery UI button gets disabled on refresh

后端未结

关注

 5  523

醉酒成梦

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 enc

相关标签:

5条回答

春和景丽

2021-02-08 10:52
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2021-02-08 10:58
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");
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
萌比男神i

2021-02-08 11:00
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);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2021-02-08 11:07

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

0 讨论(0)

长情又很酷

2021-02-08 11:16

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

0 讨论(0)
发布评论:

提交评论
- 加载中...