Фильтр для Ajax

Featherlight — легковесная библиотека для создания модальных окон в JavaScript. Одной из ключевых возможностей является загрузка контента через Ajax, что позволяет динамически подгружать содержимое без перезагрузки страницы. Для этого необходимо подключить библиотеку Featherlight и jQuery:

<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>

Инициализация модального окна с Ajax-контентом выполняется через указание селектора элемента и URL, с которого будет подгружаться содержимое:

$('.open-ajax').featherlight({
    ajax: '/path/to/content.html',
    loading: 'Загрузка...',
    afterContent: function() {
        console.log('Контент загружен');
    }
});

Здесь ajax — ключевой параметр, определяющий путь к HTML-файлу или серверному скрипту, возвращающему контент. afterContent позволяет выполнять действия после того, как контент будет вставлен в модальное окно.

Настройка параметров Ajax

Featherlight поддерживает расширенные опции для работы с Ajax:

  • type: определяет тип запроса (GET, POST и др.).
  • data: объект с данными, которые отправляются на сервер.
  • beforeSend: функция, вызываемая перед отправкой запроса, позволяет изменять заголовки или выполнять проверку.
  • error: обработчик ошибок при загрузке контента.

Пример с дополнительными параметрами:

$('.open-ajax').featherlight({
    ajax: {
        url: '/api/get-data',
        type: 'POST',
        data: { userId: 42 },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-Custom-Header', 'FeatherlightAjax');
        },
        error: function() {
            alert('Не удалось загрузить контент');
        }
    }
});

Использование объекта ajax вместо строки URL позволяет тонко настраивать поведение запроса и обрабатывать ошибки на стороне клиента.

Динамическая подстановка контента

Ajax-модальные окна позволяют загружать различные элементы страницы без дублирования HTML. Например, можно подгружать формы, таблицы или изображения в зависимости от атрибута data-url:

<a href="#" class="open-ajax" data-url="/form.html">Открыть форму</a>
$('.open-ajax').featherlight(function(event) {
    return $(this).data('url');
}, {
    afterContent: function() {
        console.log('Форма загружена');
    }
});

Использование функции вместо прямого URL позволяет выбирать источник контента динамически, основываясь на свойствах элемента.

Кастомизация отображения

Featherlight предоставляет параметры для управления внешним видом и поведением модального окна:

  • loading — текст или HTML, отображаемый во время загрузки.
  • closeIcon — HTML для кнопки закрытия.
  • afterOpen / beforeClose — колбэки, выполняемые при открытии и закрытии модального окна.

Пример с кастомной иконкой закрытия и индикатором загрузки:

$('.open-ajax').featherlight({
    ajax: '/dynamic-content.html',
    loading: '<div class="spinner"></div>',
    closeIcon: '<button class="close-btn">×</button>',
    afterOpen: function() {
        console.log('Окно открыто');
    },
    beforeClose: function() {
        console.log('Окно закрывается');
    }
});

Такой подход позволяет интегрировать Featherlight в интерфейсы с собственным дизайном и динамическим контентом.

Работа с кэшированием

По умолчанию Featherlight загружает Ajax-контент каждый раз при открытии окна. Для повышения производительности можно сохранять результат запроса и повторно использовать его:

let cachedContent = null;

$('.open-ajax').featherlight({
    ajax: '/cached-content.html',
    afterContent: function() {
        if (!cachedContent) {
            cachedContent = this.$content.clone();
        } else {
            this.$content.replaceWith(cachedContent.clone());
        }
    }
});

Такой метод особенно полезен для больших фрагментов интерфейса, которые часто открываются пользователем.

Интеграция с событиями страницы

Featherlight позволяет связывать загрузку Ajax с пользовательскими событиями, такими как клик, hover или кастомные триггеры. Пример с кастомным событием:

$(document).on('custom:openModal', function(event, url) {
    $.featherlight({ ajax: url });
});

Вызов $(document).trigger('custom:openModal', '/dynamic.html') откроет модальное окно с заданным URL. Этот механизм позволяет создавать сложные интерфейсы с динамическими окнами без привязки к конкретным DOM-элементам.

Управление вложенными Ajax-запросами

Featherlight корректно работает с вложенными Ajax-запросами. Можно подгружать модальные окна внутри других модальных окон или динамически подгружать контент после загрузки:

$('.open-ajax').featherlight({
    ajax: '/outer.html',
    afterContent: function() {
        this.$content.find('.inner-modal').featherlight({
            ajax: '/inner.html'
        });
    }
});

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

Управление событиями и жизненным циклом Ajax-модалей

Ключевые события и методы для работы с Ajax-контентом:

  • beforeOpen — перед открытием окна.
  • afterOpen — после полной вставки контента.
  • beforeContent — перед рендерингом загруженного HTML.
  • afterContent — после рендеринга и вставки контента.
  • beforeClose — перед закрытием модального окна.
  • afterClose — после закрытия окна и очистки контента.

Использование этих событий позволяет гибко управлять интерфейсом и выполнять дополнительные действия, например, инициализацию скриптов внутри загруженного контента:

$('.open-ajax').featherlight({
    ajax: '/form.html',
    afterContent: function() {
        this.$content.find('form').on('submit', function() {
            alert('Форма отправлена');
        });
    }
});

Поддержка файлов и нестандартного контента

Featherlight Ajax не ограничивается HTML. Можно подгружать JSON, Markdown или любые текстовые форматы и обрабатывать их перед вставкой в окно:

$('.open-ajax').featherlight({
    ajax: {
        url: '/data.json',
        dataType: 'json',
        success: function(data) {
            this.$content.html('<pre>' + JSON.stringify(data, null, 2) + '</pre>');
        }
    }
});

Такой подход открывает возможности для создания интерактивных интерфейсов, дашбордов и визуализаторов данных без перезагрузки страницы.

Оглавление