Почему Firefox не показывает правильный вариант выбора по умолчанию?

Я делаю веб-приложение для управления продуктом SKUS. Одна из них - связать SKU с названиями продуктов. В каждой строке таблицы я перечисляю SKU и показываю окно <select> с названиями продуктов. Продукту, который в настоящее время ассоциируется с этим SKU в базе данных, присваивается атрибут типа selected="selected". Это можно изменить и обновить с помощью AJAX.

<option> - 103, и этот список повторяется в <select> для каждой строки.

С другого ввода на странице я использую jQuery AJAX-запросы для добавления новых ассоциаций SKU/product, и чтобы было ясно, что они добавлены мгновенно, я вставляю их в верхний стол с небольшим эффектом подсветки. Поскольку количество SKU увеличивается до 10 или около того, если я обновляю страницу (которая загружает все обратно из базы данных, заказанной по названию продукта), Firefox начинает показывать некоторые неправильные параметры по умолчанию. Он несовместим с тем, какой неправильный вариант он показывает, но он, кажется, смешивает параметры, существовавшие до перезагрузки страницы.

Если я проверяю <select> с помощью Firebug, select="selected" находится в правильном теге <option>. Обновление страницы (или удаление и ввод URL-адреса этой страницы для возврата) не делает его корректным, но жесткое обновление (Ctrl + F5) делает.

Оба Chrome и IE7 отображают это правильно в первую очередь.

Моя теория заключается в том, что это результат ошибочной стратегии кеширования Firefox. Правильно ли это звучит? Есть ли способ, который я могу сказать в своем коде "если эта страница обновлена, сделать ее жестким обновлением - перезагрузить все с нуля?"

Update

Чтобы решить эту проблему, я изменил стратегии.

  • Раньше я помещал <select> с длинным списком <option> в каждой строке таблицы, с текущим значением, установленным по умолчанию
  • Теперь я помещаю текущее значение в <span>. Если пользователь нажимает кнопку "изменить", я заменяю <span> на <select>, а кнопка "change" становится кнопкой "подтвердить". Если они меняют параметры и нажимают подтвердить, AJAX обновляет базу данных, а <select> возвращается к <span>, на этот раз с новым значением.

Это имеет два преимущества:

  • Он исправляет описанную выше ошибку.
  • Для этого требуется far меньшее количество элементов DOM на странице (все эти избыточные <option> s)

Ответы

Ответ 1

Firefox сохраняет выбранные элементы формы при обновлении. Это намеренно. Ctrl + F5 - это "жесткое" обновление, которое отключает это поведение.

-

Или Command + Shift + R, если вы находитесь на Mac

Ответ 2

У меня была аналогичная проблема, но после добавления атрибута autocomplete="off" HTML для каждого тега select он работал. [Я использовал Firefox 8]

Ответ 3

Простым способом предотвращения кэширования Firefox последним выбранным вариантом является удаление всех элементов опции на странице разгрузки. Например (предполагая jQuery):

$(window).unload(function() {
  $('select option').remove();
});

Ответ 4

У меня была такая же проблема. Я пытался изменить значение выбора в зависимости от выбранного параметра = "selected", но Firefox не работал. Он всегда будет использовать первый вариант.

Chrome, Safari и т.д. работали, когда я это делал:

$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );

... но это не работает в FF.

Итак, я попробовал:

$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

и он работает.

jQuery v1.9.1

Ответ 5

Я заработал, положив autocomplete = "off" на скрытый ввод.

Ответ 6

Хотя это старый вопрос, но ниже решение может помочь кому-то

В firefox я заметил, что атрибут "selected" не будет работать, если вы не разместите выберите внутри формы, где форма имеет атрибут name.

<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>

Снова вспомните:

  • Форма
  • должна иметь атрибут имя и
  • " выберите" должен быть внутри формы.

Ответ 7

Firebug имеет функцию отключения кэша для этого сценария.

Более глубокое долгосрочное решение состоит в том, чтобы определить, как установить серверный сервер без кеша. Какой веб-сервер вы используете?

Ответ 8

Каждый раз, когда у меня когда-либо были странные ошибки выбора в Firefox, это было потому, что у меня было несколько опций, отмеченных как выделенные. Вы уверены, что только один отмечен как таковой? Похоже, вы можете легко избавиться от wack, если вы меняете это с помощью AJAX.

Ответ 9

FYI: чтобы Firefox не восстанавливал ранее выбранную опцию после перезагрузки страницы, вы можете разместить весь <form>, содержащий параметры <select> внутри <iframe>.

При выборе полей в <iframe> и перезагрузке страницы контейнера Firefox, наконец, ведет себя как ВСЕ другие браузеры, просто сбросив параметры выбора.

Ответ 10

Спасибо @BananaDeveloper (fooobar.com/questions/73326/...) - это мое решение для решения этой проблемы на одной странице приложения

Я не хотел настраивать готовый/открытый исходный код приложения

<Files "page_that_does_not_work.php">
        SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
        Substitute 's/<select/<select autocomplete="off"/n'
        Substitute 's/<form/<form novalidate/n'
</Files>

Документы Apache для mod_substitute https://httpd.apache.org/docs/2.4/mod/mod_substitute.html

Спасибо: https://serverfault.com/questions/843905/apache-mod-substitute-works-in-curl-but-not-on-browser для SetOutputFilter

Ответ 11

Я понял. Если вы поместите onunload или $(window).unload(jquery) в свой HTML с заголовком без кеша, Firefox перезагрузит страницу и инициализирует DOM даже с задней кнопки.