Ajax-запрос или обновление страницы без перезагрузки в Joomla! Как это делается?

В типичном Ajax-приложении Вам нужно будет получить некоторые данные от сервера, который может являтся как вашим сервером, так и удаленным web-сервисом,и обновить некорые эллементы на странице сайта Joomla! данными, полученными от сервера. Реализация Ajax состоит по крайней мере из трех эллементов:
1) HTML-эллемент, изменение состояние которого инициализирует Ajax запрос.
2) HTML-эллемент куда данные будут возвращены. Часто он будет показывать значок "Ajax loading" во время обменв данными. В результате Ajax-запроса содержание, состояние или поведение этого эллемента будет менятся.
3) JavaScript код, реализующий Ajax.

И так, Вам необходимо определить эллемент на странице сайта Joomla!, который будет инициализировать запрос Ajax. Этот эллемент должен иметь уникальный атрибут - идентификатор(id).
Например, у Вас на странице есть выпадающий список и Вы хотите выполнять Ajax-запрос каждый раз, когла пользователь сделает выбор.

<select name="drop-down" id="drop-down">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
 <option value="3">Item 3</option>
</select>

В данном случае уникальный идентификатор списка - id="drop-down". Вы можете программно сгенерировать вышеприведенный список, используя JHTML класс Joomla!:

<?php
$options = array();
$options[] = JHTML::_( 'select.option', '1', 'Item 1' );
$options[] = JHTML::_( 'select.option', '2', 'Item 2' );
$options[] = JHTML::_( 'select.option', '3', 'Item 3' );
echo JHTML::_( 'select.genericlist', $options, 'drop-down' );

Далее Вы должны определить HTML эллемент на странице Вашего сайта Joomla!, в который будет помещен ответ от сервера как результат Ajax-запроса.
В нашем примере определим DIV-эллемент с уникальным идентификатором id="ajax-container"<div id="ajax-container"></div>

<div id="ajax-container"></div>

Далее Вы должны разместить код JavaScript, который будет выполнять Ajax-запрос и помещать ответ от сервера в контейнер.
Для начала следует подключить библиотеку Mootols. Обычно не нужно подключать
mootools библиотеку, т.к. Joomla автоматичеки подключает ее, однако в ряде случаев Вам может понадобиться подключить ее вручную. Mootools в Joomla подключается следующим образом:

<?php
JHTML::_( 'behavior.mootools' );

Есть много способов добавить JavaScript в вывод Joomla. Один из путей состоит в использовании PHP "heredoc":

<?php
$ajax = <<<EOD
/* <![CDATA[ */
Your JavaScript code goes here.
/* ]]> */
EOD;

 
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

Вы можете вставить переменные PHP в heredoc текст, окружив их фигурными скобками:

<?php
$ajax = <<<EOD
/* <![CDATA[ */
This is some JavaScript code with {$this->embedded} PHP variable in it.
/* ]]> */
EOD;
 
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

С помощью JavaScript мы добавим обработчик события к эллементу, который инициализирует Ajax-запрос:

window.addEvent( 'domready', function() {
 
 $('drop-down').addEvent( 'change', <function-declaration> );
 
});

Функция срабатывает после загрузки документа и построения DOM (Document Object Model). В нашем примере для эллемента с Id равным drop-down
определяется событие change (сделан выбор), по наступлению которого выполняется функция <function-declaration>. Вы можете определить такие события, как
onClick, onMauseover, onMauseout, onKeypress и т.д.
Функция <function-declaration>, с помощью которой Вы будете инициализировать запрос Ajax в Joomla!, выглядит примерно так:

var a = new Ajax( {$url}, {
 method: 'get',
 update: $('ajax-container')
}).request();

Где {$url} - переменная PHP, содержащая URL для Ajax-запроса. Параметр method определяет каким методом (GET или POST) будут передаваться параметры Ajax-запроса.
Параметр update определяет контейнер для вывода ответа сервера. Однако в ряде случаев, например при использовании JSON, вы захотите сначало декодировать полученные от сервера данные, а затем обновить состояние контейнера.
Делается это при помощи параметра onComplete.

var a = new Ajax( {$url}, {
 method: 'get',
 onComplete: <completion-function>
}).request();

Функция <completion-function> будет выполнена после получения ответа от сервера.

Далее представлен полный пример скрипта Ajax-запроса в Joomla!, который получает данные в фомате JSON, декодирует их и обновляет контейнер.

window.addEvent( 'domready', function() {
 
 $('drop-down').addEvent( 'change', function() {
 
 $('ajax-container').empty().addClass('ajax-loading');
 
 var a = new Ajax( {$url}, {
 method: 'get',
 onComplete: function( response ) {
 var resp = Json.evaluate( response );
 
 // Other code to execute when the request completes.
 
 $('ajax-container').removeClass('ajax-loading').setHTML( output );
 
 }
 }).request();
 });
});

Ajax-запрос или обновление страницы без перезагрузки в Joomla! Как это делается?

Комментарии