Кнопка JQuery UI отключена при обновлении

Я спросил об этом на форуме jquery несколько недель назад без везения, поэтому я попробую еще раз:)

Я создал простой виджет для проекта, над которым я работаю, но я столкнулся с нечетной проблемой.

Проще всего объяснить это с помощью примера реализации. http://decko.dk/buttontest

На странице есть 3 кнопки. Первый - мой понижающий виджет. Следующий - обычная отключенная кнопка (A), а последняя - обычная кнопка включения (B). Если вы затем обновите страницу (нажмите F5 или что-то еще), активированная кнопка теперь таинственно отключена. Я не знаю, почему это происходит, но если кнопка A не отключена для начала, кнопка B не будет отключена при обновлении. Кроме того, если я удалю вызов для insertAfter в моем виджет-коде, кнопка не будет отключена. Может ли кто-нибудь пролить свет на то, почему это странное поведение происходит?

Кстати, я только смог воспроизвести это в Firefox.

Ответы

Ответ 1

Я считаю, что это ошибка в том, как Firefox запоминает значения полей и управляющих значений формы:

После загрузки первой страницы в документе есть три элемента <button>, а <button id="button_a"> отключен. (Когда кнопка стиля jQuery UI включена или отключена, она устанавливает базовый элемент в одно и то же состояние.)
Firefox помнит, что второй <button> отключен.
После обновления страницы, прежде чем запускать какие-либо скрипты, Firefox восстанавливает поля формы и элементы управления. Он отключает второй <button>, но поскольку не выполняется script, вторая кнопка <button id="button_b">.
Когда jQuery UI создает стилизованную кнопку для <button id="button_b">, она видит, что она отключена и продолжает стирать ее как отключенную.

Здесь есть две проблемы:

Как Firefox запоминает, какие элементы отключены. Он не учитывает динамические элементы. Я предлагаю подачу ошибки с Mozilla для этого.
Элементы формы остаются отключенными после обновления страницы. Я не уверен, что это правильное поведение, но есть два bugzilla сообщает об этом.

Тест может упростить до простого добавления элемента <button> и отключить <button id="button_a">, не требуется jQuery/jQuery UI:

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

Ответ 2

Я тоже получал эту проблему и отработал ее до глупого поведения в firefox, мое исправление было таким:

перед:

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

после

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

Ответ 3

Установив заголовок Expires HTTP в дату в прошлом, решил проблему для меня в Firefox 6.0.

Ответ 4

Вот решение, которое я нашел, работает очень хорошо во всех браузерах...

Я даю каждой кнопке (которая может быть отключена) класс 'js_submit'

Затем я снова включаю любые отключенные кнопки с классом "js_submit" в событии, которое запускается при выгрузке страницы.

Я переношу назначение события внутри try catch, чтобы предотвратить браузеры, которые не поддерживают это событие, отбрасывания ошибки (например, IE).

Вот код:

<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);
}

Ответ 5

В моем случае это была ошибка Bootstrap

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

Вместо этого он должен был

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