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

Тема в разделе "JavaScript", создана пользователем danneo, 7 ноя 2015.

Модераторы: ZiX
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    Есть форма со списками. При их изменении отправляется pos-запрос (jquery).
    Форма - это фильтры, как в интернет-магазинах фильтруются товары.

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

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

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

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    блокировка у вас где включается? по идее функцию нужно запустить из beforeSend
    Код:
    $.ajax({
      url: 'handler.php',
      type: 'post',
      data: data,
      beforeSend: function() {
        // тут код Вашей блокировки
      },
      success: function() {
        // разблокируем форму
        // обрабатываем данные с сервера
      }
    });
    
    Не ручаюсь за правильность решения, но я бы блокировал форму просто накладывая блок-оверлей, с прелоадером каким-нибудь. Как на розетке сделано, например.
    Можно еще добавить флаг, для пущей уверенности.
    Код:
    var flag = true; // По-умолчанию ставим true
    
    Перед отправкой запроса чекается переменная.
    Код:
    if (flag == 'true') {
      $.ajax({
        ...
        beforeSend: function() {
          flag = false;
          $('#overlay').show();
        },
        success: function() {
          flag = true;
          $('#overlay').hide();
        }
      });
    }
    
    А как узнать, что клиент выбрал все значения?

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

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

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    Еще вопросы:
    PHP:
    var flag true//
    и
    PHP:
    var flag false//
    1. что они делают? Чет не мог найти их описания.
    2. где делать блокировку или оверлей?
    Есть блок со списком (результат выборки), есть блок с настройками фильта.
    3. Где взять готовый скрипт overlay, чтобы все кросбраузерно и т.п., с растяжкой по высоте, ширине и т.п.
     
  4. funnywheel

    funnywheel

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

    вот готовый код оверлея )
    html:
    HTML:
    
    <div id="overlay"></div>
    
    css:
    HTML:
    
    #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
     
    danneo нравится это.