Создаем 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), он будет выглядеть так:

 
Использовать 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 и отдаем результат. Если нам модель ничего не дает выводим ошибку.

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

Пока все.

• 1
• 2
• 3
• 4
• 5