Блог в помощь

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

1. Добавить select со списком годов и пунктом «Все».

2. Написать на jQuery обработчик на изменение года в данном select.

3. В данном обработчике получить год, который был выбран и отправить ajax-запрос на сервер с параметром «год выпуска».

4. В контроллере Ajax написать метод, который будет обрабатывать наш ajax-запрос.

Напоминаю ссылку на готовый пример: Ajax-фильтрация

Первые три пункта мы реализуем в отображении cars.php

1. Добавляем select:

2. Подключаем библиотеку jQuery (если, она еще не подключена у Вас). И создаем обработчик на изменение элемента с id=”year”:

Напомню, что переменная $base_url получает свое значение (из config.php) в суперконтроллере MY_Controller таким образом :

А в наше отображение cars.php попадает из метода index контроллера Ajax вместе с другими данными вот таким образом:

Т.е. в родительское отображение main передается весь массив $this->data, который содержит:

- имя внутреннего отображения (cars – в нем мы выводим нашу таблицу с авто)

- базовый url из config.php

- массив объектов  – это данные о наших авто.

Итак, сейчас у нас при изменении года появляется сообщение со значением выбранного года. Т.е. мы уже начали реализовывать пункт 3. Осталось отправить ajax-запрос, что бы завершить выполнение нашего пункта 3.

3. Вот окончательный код отображения cars.php, а ниже немного разъяснений:

Нашу таблицу с информацией, мы заключили в блок с помощью тегов

. И присвоили этому блоку уникальный идентификатор id=”cars”.

В обработчике изменения года вместо вывода сообщения написали:

Т.е. в блок с идентификатором id=”cars” мы с помощью функции load загружаем результат, возвращаемый функцией ajax_filter контроллера ajax. Эту функцию мы напишем в следующем пункте 4.

Функция load – выполняет ajax-запрос.

1 параметр – url, куда мы посылаем запрос. Для нашего примера – это
““.

2 параметр – [data], данные, отправляемые вместе с запросом на сервер. В нашем случае – это год выпуска автомобиля.

3 параметр – [callback], функция-колбэк, которая выполняется после завершения запроса и получения ответа. В нашем примере эта функция ничего не выполняет. Ее можно было и не писать.

4. Создаем метод, который будет обрабатывать наш ajax-запрос. По url запроса (‘ajax/ajax_filter’) видно, что этот метод должен называться ajax_filter и располагаться в контроллере ajax:

В данном методе:

- инициализируем массив результата $result

- получаем год выпуска, который мы передали вторым параметром в функцию load.

- делаем проверку на то, выбран ли пункт «все» или конкретный год.

- в $result['cars'] получаем все автомобили согласно полученному условию

- передаем полученный результат в отображение ‘ajax’

Теперь осталось создать отображение ajax.php со следующим содержимым:

Здесь мы выводим таблицу, которая полностью заменит в отображении cars содержимое блока с id=”cars”.

Обратите внимание, что цикл foreach пробегает по массиву $cars, а не по $result.

Итак, мы реализовали поставленную задачу – ajax-фильтрация данных, т.е. фильтрация без перезагрузки web-страницы. Работающий пример здесь: Ajax-фильтрация