Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   После перезагрузки страницы скрипт работы переключателей перестает выполняться (https://javascript.ru/forum/jquery/76060-posle-perezagruzki-stranicy-skript-raboty-pereklyuchatelejj-perestaet-vypolnyatsya.html)

giwuf 30.11.2018 13:33

После перезагрузки страницы скрипт работы переключателей перестает выполняться
 
Есть группа переключателей, которые окрашиваются в темно-серый цвет при выборе переключателя :check.

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

Как это можно исправить?

Код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
  let className = 'label-active';
  let $inputs_time = $('#order_time_field input[type=radio]');
  $inputs_time.change(function(ev) {
    $inputs_time.parent('label').removeClass(className);
    $(this).parent('label').addClass(className);
  });
});
</script>
<style type="text/css">
.form-row label.label-active {
	background-color: #e4e4e4;
}
</style>
<div data-priority="20" class="form-row form-row-wide" id="order_time_field">
  <fieldset>
    <legend>Время доставки</legend><label><input type="radio" name="order_time" value="Ближайшее"> Ближайшее</label><label><input type="radio" name="order_time" value="К определенному времени"> К определенному времени</label></fieldset>
</div>

рони 30.11.2018 13:46

Цитата:

Сообщение от giwuf
страница перезагружается с уведомлением об ошибке,

может нет скриптов на этой новой странице?

laimas 30.11.2018 13:58

Тут не нужен JS, достаточно CSS, нужно только изменить верстку.

.form-row input:checked + label {
    background-color: #e4e4e4;
}


<input type="radio" name="order_time" id="i1" value="Ближайшее"> 
<label for="i1">Ближайшее</label>
<input type="radio" name="order_time" id="i2" value="К определенному времени"> 
<label for="i2">К определенному времени</label>

giwuf 11.12.2018 16:26

Цитата:

Сообщение от laimas (Сообщение 499581)
Тут не нужен JS, достаточно CSS, нужно только изменить верстку.

Спасибо, но мне он понадобится, т.к. input планирую скрывать

giwuf 11.12.2018 16:42

Цитата:

Сообщение от рони (Сообщение 499580)
может нет скриптов на этой новой странице?

рони, скрипты есть, просто там 2 вкладки (табы) и когда ошибка срабатывает на втором табе, при перезагрузке страницы перебрасывает на первый и переключатели возвращаются в исходное до js состояние

laimas 11.12.2018 17:13

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

giwuf 11.12.2018 21:55

Цитата:

Сообщение от laimas
giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть

laimas, да, спасибо, но, к сожалению, вкладка работает как переключатель и это второй шаг, т.е. изначально нужно попасть на вкладку 1, а с нее уже переход на 2ую вкладку, где и нужна валидация.
А как клиентом проанализировать url который открыть?

laimas 11.12.2018 22:15

Шаг чего? Если форма отправляется методом post, то url может не принимать параметров (хотя форма может и их задать), но форму то сервер принимает и он должен знать откуда она пришла, это ведь тоже может служить признаком. А значит при ошибках отдать вновь форму с раскрытой вкладкой не должно быть проблемой.

giwuf 12.12.2018 13:22

laimas
да, форма отправляется методом post - воспроизвел здесь
https://jsfiddle.net/hwt3Lbec/
Вот так это выглядит на картинке, когда при незаполнении обязательного поля на втором шаге страница перезагружается и перебрасывает на первую вкладку


А вот здесь проверка на ошибку
// Validation: Required fields.
if ( ! empty( $field['required'] ) && empty( $_POST[ $key ] ) ) {
wc_add_notice( sprintf( __( '%s is a required field.', 'woocommerce' ), $field['label'] ), 'error' );
}

laimas 12.12.2018 13:40

Ну господи, какие проблемы. ) Раскрытую/открытую закладку определяют стили, которые клиентом выбираются по щелчку. Но это же может сделать и сервер, отдавая страницу пользователю, достаточно проверять условие, была ли принята форма и есть ли ошибки ее заполнения, то есть пуст ли допустим массив ошибок или некая переменная содержащая ошибку. А так как такой массив/переменная может быть только после приема формы, то достаточно проверять только ее. Отсюда:

вывод кода закладок - кнопка, панель первой закладки - если !$error, значит она открыта по умолчанию (в атрибутах прописаны стили, кнопка выбрана), вывод второй закладки, - если $error, значит делаем эту кнопку открытой (в атрибутах прописаны стили, кнопка выбрана).

Неизвестно что должно быть если форма заполнена верно, но если также должна открываться вторая вкладка, значит для ней проверяется не только ошибки но и POST данные, то есть $_POST || $error - открыть вторую закладку.

Это разве нельзя сделать на сервере?


Часовой пояс GMT +3, время: 19:53.