Моя предыдущая история была о Festivalocator, приложении Rails для изучения музыкальных и кинофестивалей со всего мира. Следуя своему заданию на Learn.co, я внес некоторые улучшения во внешний интерфейс приложения.
1. Фильтрация фестивалей и обновление результатов на странице с помощью AJAX
Раньше страница перезагружалась каждый раз после того, как пользователь выбирал некоторые параметры фильтра и нажимал кнопку «Фильтр». Чтобы этого избежать, я добавил функцию filterFestival(). Эта функция захватывает значения полей ввода фильтра, отправляет AJAX-запрос с правильными параметрами поиска, а затем отображает ответ в том же контейнере с фестивалями. Сложной частью здесь для меня было выяснить, как получить значения фильтра из выпадающего ввода. Добавление «option:selected» к селектору решило проблему.
$(‘[name="category"] option:selected’).text()
2. Отображение комментариев к фестивалю и добавление новых с помощью AJAX
После добавления новой ассоциации комментариев has_many в модель фестиваля я решил, что было бы здорово, если бы раздел комментариев появлялся на странице фестиваля при нажатии кнопки «показать комментарии», поэтому я добавил прослушиватель событий и создал функцию showComments(). который отправляет два запроса AJAX для отображения «индекса» комментариев и «новой» формы комментария на странице. Присоединение другого прослушивателя событий и предотвращение действия по умолчанию кнопки «Создать комментарий» позволило мне добавить новый контент комментария на страницу без перезагрузки страницы.
3. Отрисовка формы редактирования на странице шоу, ее отправка и отображение обновленного фестиваля с помощью AJAX.
Я обновил страницу шоу, чтобы отображать форму редактирования вместо информации о фестивале при нажатии кнопки Редактировать. Затем форма отправляется с использованием AJAX, и ответ на запрос PATCH возвращается в форме JSON. Чтобы это произошло, я использовал gem ‘active_model_serializers’, который позволил мне получить доступ к странице шоу фестиваля в форматах HTML и JSON. Active Model Serializer позволил мне создать некоторые пользовательские удобочитаемые свойства для категории, мировой части и даты. В противном случае категория и мировая часть были бы представлены в виде идентификаторов. Для удобства визуализации страницы шоу с использованием данных JSON я создал объектную модель Javascript и использовал обработчик шаблонов Handlebars в представлении фестиваля шоу.
