Кнопка JQuery UI отключается при обновлении - PullRequest
Новая
       26

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

10 голосов
/ 27 апреля 2010

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

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

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

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

Кстати, мне удалось воспроизвести это только в Firefox.

Ответы [ 5 ]

12 голосов
/ 27 апреля 2010

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

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

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

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

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

<!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>
4 голосов
/ 16 октября 2010

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

перед: 

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

после 

//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");
0 голосов
/ 01 июня 2015

В моем случае это была ошибка 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">
0 голосов
/ 18 февраля 2012

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

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

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

Я обертываю назначение события внутри try-улова, чтобы браузеры, которые не поддерживают это событие, выдавали ошибку (например, 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);
}
0 голосов
/ 26 августа 2011

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

...