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

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();
 });
});

Комментарии 

 
-2 #5 GS 14.10.2011 05:20
а что не понятного то? есть конечно способы и без использования API Joomla!, но это уже другая тема
Цитировать
 
 
-1 #4 Юрий 12.10.2011 11:43
Почему все перепечатывают из одного и того же места: документации Joomla?
Видимо более толково что-то мешает написать.
Цитировать
 
 
-1 #3 Константин 20.08.2011 23:02
НИЧЕГО НЕ ПОНЯЛ :cry:
Цитировать
 
 
-2 #2 Владимир 16.04.2011 20:44
А как форму отправить?
Цитировать
 
 
+1 #1 jquery 22.02.2011 17:47
Спасибо! помогло :lol:
Цитировать