Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.11.2018, 13:33
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

После перезагрузки страницы скрипт работы переключателей перестает выполняться
Есть группа переключателей, которые окрашиваются в темно-серый цвет при выборе переключателя :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>
Ответить с цитированием
  #2 (permalink)  
Старый 30.11.2018, 13:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от giwuf
страница перезагружается с уведомлением об ошибке,
может нет скриптов на этой новой странице?
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2018, 13:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Тут не нужен 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>

Последний раз редактировалось laimas, 30.11.2018 в 14:01.
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2018, 16:26
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от laimas Посмотреть сообщение
Тут не нужен JS, достаточно CSS, нужно только изменить верстку.
Спасибо, но мне он понадобится, т.к. input планирую скрывать
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2018, 16:42
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение
может нет скриптов на этой новой странице?
рони, скрипты есть, просто там 2 вкладки (табы) и когда ошибка срабатывает на втором табе, при перезагрузке страницы перебрасывает на первый и переключатели возвращаются в исходное до js состояние
Ответить с цитированием
  #6 (permalink)  
Старый 11.12.2018, 17:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2018, 21:55
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от laimas
giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть
laimas, да, спасибо, но, к сожалению, вкладка работает как переключатель и это второй шаг, т.е. изначально нужно попасть на вкладку 1, а с нее уже переход на 2ую вкладку, где и нужна валидация.
А как клиентом проанализировать url который открыть?
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2018, 22:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Шаг чего? Если форма отправляется методом post, то url может не принимать параметров (хотя форма может и их задать), но форму то сервер принимает и он должен знать откуда она пришла, это ведь тоже может служить признаком. А значит при ошибках отдать вновь форму с раскрытой вкладкой не должно быть проблемой.
Ответить с цитированием
  #9 (permalink)  
Старый 12.12.2018, 13:22
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

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' );
}
Ответить с цитированием
  #10 (permalink)  
Старый 12.12.2018, 13:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

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

Это разве нельзя сделать на сервере?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновление страницы после получения ответа от сервера potrashitel AJAX и COMET 9 24.02.2015 10:04
Почему скрипт срабатывает только после обновления страницы? Randomizer jQuery 2 01.09.2010 19:01
Событие после обновления страницы ajax'ом kryzhovnik Events/DOM/Window 4 07.10.2009 22:32
Запуск скрипта после загрузки страницы vital8 Элементы интерфейса 2 24.09.2009 18:06
firefox зависает после обновления страницы constantant Firefox/Mozilla 4 14.09.2009 12:30