Фильтрация: блокировка select на время запроса

[danneo]

Есть форма со списками. При их изменении отправляется pos-запрос (jquery).
Форма - это фильтры, как в интернет-магазинах фильтруются товары.

Перед отправкой делаю блокировку каждого списка. Атрибут добавляется, но блокировки не происходит. Если через консоль прописать, то блокируется.
1. В чем может быть проблема?

Но в то же время, если заблокировать списки, то они не отправляются на сервер.
Тогда, как правильно сделать, чтобы при изменении поля пользователь не смог отправить повторный запрос, путем изменения списка? Иначе происходит обработка нескольких запросов.
Можно это сделать условием (если не обработан более ранний запрос, то не отправлять новый).
Но если не совершать отправку, пока выполняется обработка ранее отправленного запроса, то список все равно можно изменить. А это значит, что пользователь мог изменить параметр списка по незнанию. И когда первый запрос обработается, он получит устаревшую информацию (из 1-го запроса), думая, что информация актуальная (из 2-го запроса, которого и не было на самом деле), т.к. он выбрал список (который не обработался).
2. Как это правильнее всего сделать?

3. Как сделать, чтобы при выборе нескольких значений в списке (multiple), форма не отправлялась, пока пользователь не накликал все необходимые ему параметры? А то долго больно так будет.

 

[funnywheel]

1. В чем может быть проблема?

блокировка у вас где включается? по идее функцию нужно запустить из beforeSend

$.ajax({
  url: 'handler.php',
  type: 'post',
  data: data,
  beforeSend: function() {
    // тут код Вашей блокировки
  },
  success: function() {
    // разблокируем форму
    // обрабатываем данные с сервера
  }
});

2. Как это правильнее всего сделать?

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

var flag = true; // По-умолчанию ставим true

Перед отправкой запроса чекается переменная.

if (flag == 'true') {
  $.ajax({
    ...
    beforeSend: function() {
      flag = false;
      $('#overlay').show();
    },
    success: function() {
      flag = true;
      $('#overlay').hide();
    }
  });
}

3. Как сделать, чтобы при выборе нескольких значений в списке (multiple), форма не отправлялась, пока пользователь не накликал все необходимые ему параметры? А то долго больно так будет.

А как узнать, что клиент выбрал все значения?

Вообще, личное мнение - сабмит фильтров в магазинах после выбора галочки - не просто моветон, а последнее что стоило придумывать. Сабмит фильтра должен происходить по клику. Если у меня медленный интернет и я хочу указать 25 параметров - неужели я должен 40 минут потратить на фильтр?

С моей точки зрения идеальный вариант фильтра - m.ua - на событие .change() отправляется запрос, который говорит количество подходящих под мою настройку фильтра товаров, а загрузятся все товары после нажатия на "подобрать"

 

[danneo]

Еще вопросы:

var flag = true; //

и

var flag = false; //

1. что они делают? Чет не мог найти их описания.
2. где делать блокировку или оверлей? Есть блок со списком (результат выборки), есть блок с настройками фильта.
3. Где взять готовый скрипт overlay, чтобы все кросбраузерно и т.п., с растяжкой по высоте, ширине и т.п.

 

[funnywheel]

1. что они делают? Чет не мог найти их описания.

Обычная переменная с булевым значением. Перед отправкой проверяем значение. Если true, то алгоритм:
1) устанавливаем для флага значение false (запрещаем повторную отправку формы)
2) отправляем запрос на сервер
3) получаем ответ от сервера
4) возвращаем flag'у значение true (снова разрешаем отправку)
вот набросал Для просмотра ссылки Войди или Зарегистрируйся
(там и с оверлем вариант, и сделал эмуляцию ответа через setTimeout. оверлей - 24 и 26 строки в js, закомментируй, проверишь просто работу флага)

вот готовый код оверлея )
html:

<div id="overlay"></div>

css:

#overlay {
  display: none; /* по умолчанию display: none */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  heght: 100%;
  background: rgba(0,0,0,.5);
  z-index: 999; /* z-index на вкус и цвет, при необходимости */
}

js:

// Показать оверлей:
$('#overlay').show();

// Скрыть оверлей:
$('#overlay').hide();

* блок, в котором будет лежать #overlay, естественно, должен иметь position: relative/absolute