0

Всем привет, есть готовый фильтр но он с перезагрузкой страницы, как будет правильнее реализовать фильтр без перезагрузки.

Вот фильтр с перезагрузкой

    $filter = $_GET["sort"];
        <form method="GET" action="filter.php">
              <ul class="checkbox-filter">
                  <li>
                      <input type="checkbox" name="sort[]" value="one" id="check"/>
                      <label  class="checkbox" for="checkbrendx">one</label>
                  </li>
                  <li>
                      <input type="checkbox" name="sort[]" value="two" id="check"/>
                      <label  class="checkbox" for="checkbrendx">two</label>
                  </li>
              </ul>
              <input type="submit" name="submit" id="button" value="Применить" />
        </form>
<div id="item">
     <div>one</div> <-- эти блоки из БД (в ячейках указаны значения one или two)
     <div>two</div> <-- эти блоки из БД (в ячейках указаны значения one или two)
<div>

Как бы так красиво реализовать его на AJAX

$(document).on('click', '.checkbox-filter', function(){
    var filter = 'тут нужно как-то получить данные из переменной $filter с массивом $_GET["sort"]';
    function show(url, selector){  
        $.ajax({ 
            type: "POST",                   
            url: url,
            data: "filter="+filter,                         
            cache: false,  
            success: function(html){  
                $(selector).html(html);  
            }  
        });  
    }
    show('../functions/filter.php', '#item');
});

3 ответа 3

1
+50

В вашем случае можно использовать метод serialize, который сериализует значения формы в URL-encoded строку запроса:

$(document).on('click', '.checkbox-filter', function(){
    var filter = $(this).parents('form').serialize();
    function show(url, selector){  
        $.ajax({ 
            type: "POST",                   
            url: url,
            data: "filter="+filter,                         
            cache: false,  
            success: function(html){  
                $(selector).html(html);  
            }  
        });  
    }
    show('../functions/filter.php', '#item');
});
1

Если я правильно тебя понял, то по клику на .checkbox-filter ты просто разбираешь урл текущей страницы, доступный через location.href с помощью, например, регулярных выражений, а затем полученные таким образом данные используешь в своей функции show().

А вообще, скорее всего у тебя на странице пользователь может играться с фильтрами, и стоит использовать History API - с его помощью можно как раз без перезагрузки страницы менять урл в адресной строке, а затем обрабатывать это изменение. Еще как плюс, если кнопками браузера подвигать историю посещений страниц, то там будут все твои фильтры в адресной строке, которые можно будет применять по событию "popstate", если я ничего не путаю, что сделает поведение интерфейса более привычным для юзеров. В общем, копай в сторону объекта location, History API и регулярных выражений.

2
  • спасибо за ответ, почитаю об этом, но вот сейчас я пробую брать данные не через url, а брать сразу из чекбоксов и вот проблема в том что берет только одно значение 6 апр 2017 в 22:44
0
<?php $filter = $_GET["sort"]; ?>
<div id="filter-val" data-filter="<?php echo $filter; ?>"></div>

<form id="filter-form" method="GET" action="filter.php">
      <ul class="checkbox-filter">
          <li>
              <input type="checkbox" name="sort[]" value="one" id="check"/>
              <label  class="checkbox" for="checkbrendx">one</label>
          </li>
          <li>
              <input type="checkbox" name="sort[]" value="two" id="check"/>
              <label  class="checkbox" for="checkbrendx">two</label>
          </li>
      </ul>
      <input type="submit" name="submit" id="button" value="Применить" />
</form>

<div id="item">
     <div>one</div> <-- эти блоки из БД (в ячейках указаны значения one или two)
     <div>two</div> <-- эти блоки из БД (в ячейках указаны значения one или two)
<div>


<script type="text/javascript">
    function show(url, selector, toSend){ // Функция не нужна внутри события, зачем переопределять
        $.ajax({ 
            type: "POST",
            url: url,
            data: toSend, // Обратить внимание, что обработчик теперь нужно немного изменить
            cache: false,
            success: function(html){
                $(selector).html(html);
            }
        });
    }

    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        var toSend = $(this).serializeArray(); // Здесь вся инфа с формы
        var arrFilter = [];
            arrFilter['name'] = 'filter';
            arrFilter['value'] = $('#filter-val').data('filter');
        toSend.push(arrFilter); // Дополняем данные с твоим фильтром
        show('../functions/filter.php', '#item', toSend); // Видимм третий параметр
    });

    $(document).on('click', '.checkbox-filter', function(){
        $('#filter-form').submit(); // инициализиуем отправку при клике (можно так же клик поменять на change)
    });
</script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.