-
Главная
-
Joomla
-
Создание модуля
- AJAX функциональность с помощью AJAX интерфейса com_ajax
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:
<?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.