Создаем AJAX компонент с использованием Mootools

08/01/2010 Создание компонента Joomla 1.5

Продолжение темы Создаем простой AJAX компонент.

Стандартно в Joomla 1.5 идет Mootools 1.11-1.12, что является не очень хорошей новостью. Так как эта версия давно уже устарела и сейчас в основном все делается на Mootools 1.2 и выше. Но думаю наступят хорошие времена и Joomla выберится из этой ж...

Итак в прошлый раз я рассказал как сделать обычный компонент с использованием XMLHttpRequest(). Mootools нам в этом значительно упращает задачу, т.к. мы будем пользоваться его библиотеками.

Если у вас нет шаблона компонента можете скачать из предыдущей статьи, я буду примеры приводить по нему.

Первое что, наверное, сделаем это подключим библиотеку Mootools. В вид (view.html.php) добавляем:

JHTML::_( 'behavior.mootools' );

Теперь займемся скриптом. Открываем js\hello.js удаляем все, и вставляем следующее:

window.addEvent('domready', function() {
$('run').addEvent('click', function(e) {
 
var sel = $('state').value;
var url = 'index.php?option=com_demoajax&task=hello&format=raw&select='+sel;
 
 
ajax = new Ajax(url, {
update: $('log'),
method: 'post',
onComplete: function(response) {
var res = Json.evaluate(response);
if (res.json) {
res.items.each(function(f) {
var one = new Element('div',{id: 'user'}).setHTML(f.name).injectAfter($('state'));
var two = new Element('div').setHTML(f.login).injectAfter(one);
var three = new Element('div').setHTML(f.email).injectAfter(two);
new Element('br').injectAfter(three);
 
})
 
}
}
 
}).request();
});
});

Описывать работу с Mootools я не буду, т.к. не умею и не хочу, думаю вам лучше будет почитать соответствующую документацию. Там вроде грамотные дядьки что то вразуметельное рассказывают. Скажу что в этом примере я использую два метода передачи данных: обычный XHTML (это я его так называю) и JSON. Итак если мы выбираем обычный метод у нас просто обновляется DOM элемент с id="log". Если мы выбираем JSON у нас создаются 3 див элемента, после DOM с id="state". Проверка будет происходить, когда мы получим ответ от сервера  - if (res.json), т.е. переменная res.json должна быть истиной. В этом примере я сугубо не вдовался в оформление и тонкости, в основном используется какой либо один из методов.

Поэтому при выводе результатов в JSON DOM элемент с id="log" тоже будет обновляться, также я не далал контроль, т.е. элементы будут добавляться всегда.

Суть примера продемонстрировать два способа. Как говориться два в одном.

Теперь вписываем в шаблон нужные элементы (default.php), он будет выглядеть так:


 
Использовать JSON
<select id="state" name="update">
<option value="0">Нет</option>
<option value="1">Да</option>
</select>
 
 
<h1><a href="#" id="run">Пуск</a></h1>
<div id="log"></div>

Теперь контроллер (controller.php), сердце так сказать. Task или функция будет следующая:

	function hello()
{
 
$select = JRequest::getVar('select', '','get', 'int');
$model = $this->getModel('myuser');
$myuser = $model->getUser();
if ($myuser)
{
if (!$select) {
$html = '';
 
foreach ($myuser as $user) {
$html .= '

Ваше имя: '
. $user->name;

$html .='
Ваш логин: '
. $user->username;

$html .='
Ваш email: '
. $user->email;

}
echo $html;
} else {
$anwser = array();
$anwser['json'] = 1;
$i = 0;
foreach ($myuser as $user) {
$anwser['items'][$i]['name'] = 'Ваше имя: ' . $user->name;
$anwser['items'][$i]['login'] = 'Ваш логин: ' .$user->username;
$anwser['items'][$i]['email'] = 'Ваш email: ' .$user->email;
$i++;
}
echo json_encode($anwser);
}
 
} else {
echo 'ОШИБКА';
}
}

Переменная $select, как видно из hello.js мы передаем ее значение в url запроса. Дальше подключаем модель используем ее метод, в данном случае метод возвращает список всех пользователей (см. ниже). Дальше проверяем значение переменой если она не установлена возвращаем чистый HTML, если установлена задаем массив, который потом кодируем в JSON и отдаем результат. Если нам модель ничего не дает выводим ошибку.

Файл модели будет выглядеть так:

Пока все.

Вложения:
com_demo2_ajax.zip[ ] (1217) Загрузок

11 

Комментарии   

 
0 я
24.01.2016 22:31
Не менее популярен среди населения и забор из дерева: http://zaboroff.spb.ru/ustanovka-zaborov-i-vorot/ustanovka-derevyannyh-zaborov/ . Он представляет из себя прочную металлическую конструкцию и может выполняться как секционная ограда, выполненная отдельными щитами из уголка и сетки рабицы, открывающая Ваш участок взглядам окружающих, а также как более скрытное ограждение из пофнастила.
Ответить
 
 
0 я
24.01.2016 22:33
http://zaboroff.spb.ru
< a href="http://zaboroff.spb.ru/">заборы из профнастила
Ответить
 
 
0 я
24.01.2016 22:33
: http://zaboroff.spb.ru
Ответить
 

Добавить комментарий


Защитный код
Обновить