AJAX функциональность с помощью AJAX интерфейса com_ajax

Сразу хочу обратить ваше внимание на то, что этот материал относится к Joomla 3.2+, так как именно в этой версии появился удобный AJAX интерфейс в виде компонента com_ajax. Компонент является точкой входа для AJAX запросов в модули и плагины.

Постановка задачи

Итак, наш модуль выводит список последних зарегистрированных пользователей. Чтобы показать, как легко можно реализовать AJAX функциональность в модуле, в качестве примера сделаем следующее – при клике на пользователя будут отображаться заголовки последних трех материалов пользователя.

Конечно, это очень надуманный пример, так как статьи можно было бы с легкостью получить сразу же со списком пользователей. Но наша главная задача состоит в том, чтобы разобраться, как работает AJAX интерфейс, поэтому суть примера в принципе не важна.

Подготавливаем макеты вывода

В макетах нам нужно предусмотреть вывод ID пользователя, чтобы затем передать его в AJAX запрос. Также нам нужно добавить контейнер для вывода списка материалови обернуть вывод пользователя в ссылку, чтобы привязаться к событию клика.

Наш модуль имеет два макета: default и table. В качестве примера возьмем default макет. Все изменения в разметке были сделаны между тегами <li>:

<li>
    <a href="#" class="mlu-user" data-userid="<?php echo $user->id; ?>">
        <?php if ($displayMode == 0) : ?>
            <?php echo $user->username; ?>
        <?php elseif ($displayMode == 1) : ?>
            <?php echo $user->name; ?>
        <?php elseif ($displayMode == 2) : ?>
            <?php echo $user->username; ?> (<?php echo $user->name; ?>)
        <?php endif; ?>
    </a>
    <div id="mlu-container-<?php echo $user->id; ?>" style="display:none"></div>
</li>

Мы обернули вывод в тег <a> и назначали класс mlu-user, чтобы привязаться к событию клика. ID пользователя выводится в атрибут data-userid. Также был добавлен контейнер для вывода ответа AJAX запроса.

Добавляем AJAX запрос

Для составления AJAX запроса в модуле мы должны придерживаться определенных правил, которые диктует нам интерфейс компонента com_ajax. Следующие параметры являются обязательными при формировании запроса:

• option=com_ajax – всегда используем компонент com_ajax;
• module=module_name – передаем имя модуля, в который мы делаем запрос. Важный момент – имя модуля должно быть без префикса mod_;
• format=json – указываем формат возвращаемых данных: raw, json или debug.

Код AJAX запроса мы добавляем в конце точки входа модуля mod_latest_users.php:

// Код AJAX запроса
?>
<script>
(function($) {
    $('.mlu-user').on('click', function(event) {
        event.preventDefault();
        var userid = $(this).data('userid'); // Получаем ID пользователя
        var target = $('#mlu-container-' + userid); // Устанавливаем контейнер для вывода данных
 
        // Формируем параметры запроса
        var request = {
            'option': 'com_ajax', // Используем AJAX интерфейс
            'module': 'latest_users', // Название модуля без mod_
            'format': 'json', // Формат возвращаемых данных
            'userid': userid // ID пользователя
        };
 
        // Посылаем AJAX запрос
        $.ajax({
            type: 'POST',
            data: request,
        })
            .done(function(response) {
                // Есть успешный ответ сервера и данные
                if (response.success && response.data) {
                    // Собираем список материалов
                    var result = '<ul>';
                    $.each (response.data, function(index, value) {
                        result += '<li>' + value.title + '</li>';
                    });
                    result += '</ul>';
 
                    // Заполняем контейнер списком материалов
                    target.html(result).fadeIn();
                }
 
                // Есть успешный ответ сервера, но нет данных.
                if (response.success && !response.data) {
                    target.html('<?php echo JText::_('MOD_LATEST_USERS_NO_ARTICLES'); ?>').addClass('text-error').fadeIn();
                }
 
                // Есть неуспешный ответ сервера и текст ошибки
                if (!response.success && response.message) {
                    target.html(response.message).addClass('text-error').fadeIn();
                }
 
                // Скрываем контейнер через 3 секунды
                setTimeout(function() {
                    target.fadeOut();
                }, 3000);
            })
            .fail(function() {
                target.html('<?php echo JText::_('MOD_LATEST_USERS_ERROR_PROCESSING_REQUEST'); ?>').addClass('text-error').fadeIn();
 
                // Скрываем контейнер через 3 секунды
                setTimeout(function() {
                    target.fadeOut();
                }, 3000);
            });
    });
})(jQuery);
</script>

Совет. Используйте в качестве возвращаемых данных формат json. В таком случае com_ajax использует класс JResponseJson, который очень удобен в плане обработки возвращенных данных. Подробнее об этом классе вы можете прочитать в материале JResponseJson – возвращаем данные в формате JSON.

Не забудьте добавить в языковые файлы константы:

en-GB

MOD_LATEST_USERS_NO_ARTICLES="This user does not have any articles."
MOD_LATEST_USERS_ERROR_PROCESSING_REQUEST="There was an error processing request."

ru-RU

MOD_LATEST_USERS_NO_ARTICLES="У пользователя нет материалов."
MOD_LATEST_USERS_ERROR_PROCESSING_REQUEST="Произошла ошибка в процессе запроса."

Добавляем AJAX обработчик

Поддержка модулей в AJAX интерфейсе реализована через вызов метода в файле хелпера модуля, название которого должно заканчиваться на Ajax. По умолчанию префиксом метода является get, в итоге мы получаем getAjax().

Мы можем вызвать метод с другим именем, задав имя метода в переменной method при формировании запроса, например method=myMethod. Таким образом, будет вызван метод myMethodAjax(). Это дает возможность реализовать в модуле несколько различных обработчиков AJAX запросов.

Вот как выглядит обработчик в нашем модуле:

/**
 * Метод получает список последних материалов пользователя
 *
 * @return  mixed  Заголовки материалов пользователя или null
 */
public static function getAjax()
{
    $db = JFactory::getDbo();
    $query = $db->getQuery(true);
 
    $query->select($db->quoteName('title'))
        ->from($db->quoteName('#__content'))
        ->where($db->quoteName('state') . ' = 1')
        ->where($db->quoteName('created_by') . ' = ' . JFactory::getApplication()->input->getInt('userid'))
        ->order($db->quoteName('created') . ' DESC');
 
    $db->setQuery($query, 0, 3);
    $result = $db->loadObjectList();
 
    if (!empty($result))
    {
        return $result;
    }
 
    return null;
}

В принципе, метод достаточно прост и не требует особых комментариев. Единственное, можно отметить, что ID пользователя мы получаем из запроса с помощью JInput.

Итог

На примере этого материала мы с вами убедились в том, что добавление AJAX в модуль Joomla является довольно простой задачей благодаря AJAX интерфейсу. Удачной вам разработки!

Код модуля

Исходный код модуля доступен на GitHub: для Joomla 2.5 и для Joomla 3.
Также вы можете скачать архив: для Joomla 2.5 и для Joomla 3.