Создаем AJAX компонент с использованием Mootools
Продолжение темы Создаем простой 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), он будет выглядеть так:
Теперь контроллер (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 и отдаем результат. Если нам модель ничего не дает выводим ошибку.
Файл модели будет выглядеть так:
Пока все.
11
