Создаем простой AJAX компонент

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

В этом примере я продемонстрирую как легко и быстро можно сделать AJAX компнент.

Итак возмем самый простой компонент, можно от сюда.

Открываем файл контроллера (components\com_hello\controller.php) и добавляем в него новую функцию (или task)

	function hello()
{
sleep(2); // добавим немного задумчивости, для реализма :)
$id = JRequest::getVar('id');
$model = $this->getModel('myuser');
$myuser = $model->getUser($id);
if ($myuser) {
$html = 'Ваше имя: ' . $myuser->name;
$html .='
Ваш логин: '
. $myuser->username;

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

} else {
$html = 'Пользователя с таким ID не существует';
}
echo $html;
}
Не забываем про кодировку. Файл нужно сохранить в кодировке UTF8 без BOM.

Здесь как видно идет обращение к модели, которой пока еще нет. Сейчас как раз и создадим ее. Итак создаем файл com_hello\models\myuser.php следующего содержания:

Как видно из кода метод getUser возвращаят объект, который содержит значение всех полей указанного пользователя. Ну вобщем это все стандартные операции Joomla, здесь останавливаться не стоит.

Дальше создадим новый файл скрипта components\com_hello\js\hello.js, следующего содержания:

function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
 
// javascript-код голосования из примера
function ajaxfunction() {
// (1) создать объект для запроса к серверу
var req = getXmlHttp()
 
// (2)
// span рядом с кнопкой
// в нем будем отображать ход выполнения
var statusElem = document.getElementById('status');
var id = document.getElementById('userid').value;
 
req.onreadystatechange = function() {
// onreadystatechange активируется при получении ответа сервера
 
if (req.readyState == 4) {
// если запрос закончил выполняться
 
statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
 
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
var newElement = document.createElement('div')
newElement.innerHTML = req.responseText
statusElem.appendChild(newElement)
}
// тут можно добавить else с обработкой ошибок запроса
}
 
}
 
// (3) задать адрес подключения
req.open('GET', 'index.php?option=com_hello&task=hello&format=raw&id='+id, true);
 
// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
// для обработки ответа сервера
 
// (4)
req.send(null); // отослать запрос
 
// (5)
statusElem.innerHTML = 'Ожидаю ответа сервера...'
}

Здесь стоит обратить внимание на ссылку, в ней присутствует параметр format=raw. Это означает, что она вернет нам не весь документ, а только ту часть которую возвращает компонент. Про все остальное рассказывать не буду, лучше почитать соответствующую литерату.

Теперь нам нужно подключит этот скриптт. Добавим в вид com_hello\views\hello\view.html.php

$document    = &JFactory::getDocument();
$baseurl = JURI::base();
$document->addScript($baseurl . "components/com_hello/js/hello.js");

Так же можно использовать вместо путей константы Joomla, я выбрал такой вариант.

Ну и последнее, добавлеяем в шаблон нужные элементы com_hello\views\hello\tmpl\default.php добавляем

Введите ID пользователя
<input type="text" id="userid" maxlength="3" size="2" />
<br />
<a href="#" onclick="ajaxfunction()">Пуск</a>
<div id="status"></div>

Как видно из шаблона кликая на ссылку вызывается функция ajaxfunction(), которая была описана в файле hello.js

Ну вот и все результатом работы данного компонента будет вывод информоции о пользоателе по его ID, с помощью AJAX.

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

23 

Комментарии   

 
-1 Kirill
16.04.2010 11:19
Спасибо! Полезная информация!
Ответить
 
 
-1 ecolora
24.06.2010 12:57
Попробовал установить Ваш демо-компонент. В админ-панели, при выборе его в меню в списке компонентов, Joomla ругается, мол:
404 - Возникла ошибка
Component Not Found
Ответить
 
 
-2 Nick
08.07.2010 17:00
Большая просьба автору: не могли бы вы для примера создать точно такой же компонент (поиск пользователя), но без AJAX, чисто на PHP, и также вывесить на этом сайте. Заранее, спасибо.
Ответить
 
 
+1 Виталий
12.09.2010 23:13
Я только начинаю, разбираться в Joomka и Ajax, сделал по примеру а при ответе с сервера вылетает сообщение Internal Server Error, я так понимаю, что ошибка где то в JS, алертами проверил readystatу 4, а вот статус вместо 200 500, куда рыть? подскажите
Ответить
 
 
-1 m667v
05.10.2010 16:17
хороший пример, но можно было побольше комментариев вставить
Ответить
 
 
-1 Глас народа
02.03.2011 15:35
Виталий, проверьте присутствует ли у вас контролер из которого вы вызываете метод (task) в этой строке.

req.open('GET', 'index2.php?option=com_seanceorder&controller=order&task=ajax_order&id='+id, true);


Господа не ленитесь помогайте людям и людям помогут вам, если бы кто-то написал это раньше мне бы не пришлось тратить несколько часов на поиск решения, но я сохраню эти часы другим людям.
Ответить
 
 
-1 Глас народа
02.03.2011 15:35
название контролера у вас своё будет.
Ответить
 
 
-1 JFan
01.04.2011 15:35
Автору респект. Оч помогли! Спасибо:)
Ответить
 
 
-1 PigmaLion
09.06.2011 00:52
Автору мега-респект! Помог сделать халтуру и не только) С удовольствием бы поработал в команде с таким профи.
Ответить
 
 
+1 Nikko320
05.08.2011 18:01
1 В примере файл hello.js
строка req.open('GET', 'index.php?option=com_demoajax&task=hello&format=row&id='+id, true);
формат данных RAW, а не ROW!!!
2 В тексте отсутствует содержимое модели myuser.php

За информацию спасибо!
Ответить
 
 
+1 bondarenkosss
04.10.2011 12:47
Народ, у кого получилось прикруть это к joomlЕ? Исходники, которые предлагает скачать автор в чистом виде неработоспособны. Если делать как в статье - отсутствует листинг myuser.php... Взял myuser.php из исходников, но всё равно ничего не выходит, ввожу id - пишет Internal Server Error.
Автор, ну оформите по человечески статью. Я новичок и на выявление ошибок уходит очень много времени.
Хотябы исходники то должны работать! Хрен с ним с листингом!
Ответить
 
 
+2 SmokerMan
11.10.2011 00:00
Цитирую bondarenkosss:

Автор, ну оформите по человечески статью. Я новичок и на выявление ошибок уходит очень много времени.
Хотябы исходники то должны работать! Хрен с ним с листингом!

С помощью выявления ошибок некоторые люди как раз и учатся. Если ничего не делать и не пробовать, то толку от этого не будет.
На момент написания статьи все проверялось и работало, иначе бы не выкладывалось.
Ответить
 
 
+1 bondarenkosss
11.10.2011 20:24
Да всё верно, беру свои слова обратно. Всё работает отлично. С толку сбивает то, что в админке компонента показывает ошибку.
Сделал на основе Вашего компонента свой. Спасибо!
Ответить
 
 
-1 webinf
29.11.2011 12:03
Спасибо за статью - помогло.
В файле hello.js вместо - Ожидаю ответа сервера... - вставил . Картинку загрузчика можно сформировать здесь ajaxload.info
Мешало ОК после отработки скрипта. Вставил statusElem.innerHTML = null в условие if(req.status == 200) {
Может есть другой вариант?
Ответить
 
 
-1 webinf
29.11.2011 12:05
Тег img выбросило
- вставил img src="/images/stories/ajax-loader.gif"
Ответить
 
 
-1 Вотчо
13.04.2012 01:49
Вот чо?
Ответить
 
 
0 Гдебл9
10.10.2013 15:14
Итак создаем файл com_hello\models\myuser.php следующего содержания:
Где содержание то >
Ответить
 
 
+1 Витимс
02.07.2014 13:31
можете помочь с обновлением комментариев без перезагрузки страницы в k2?
Ответить
 
 
0 Cooper
16.05.2017 03:05
We are a gaggle of volunteers and starting a new scheme in our community.
Your site provided us with useful information to work on. You've performed an impressive task and our entire group might be grateful to you.


Here is my blog toe specialist time (Mackenzie: http://jhopson88.soup.io/post/395046596/The-reasons-why-People-Buy-Shoe-Inserts)
Ответить
 
 
0 Norris
07.08.2017 09:17
Hi! I'm at work surfing around your blog from my new iphone!
Just wanted to say I love reading your blog and look forward to all
your posts! Keep up the outstanding work!

Feel free to visit my page ... captcha solvers: http://www.cliparchiver.com/comment/html/index.php?page=1&id=53257
Ответить
 
 
0 Gertrude
07.08.2017 12:40
Hi there to all, how is all, I think every one is getting more from this web
page, and your views are good in favor of new visitors.

Here is my homepage: http://expertdecoders.com/Programmer-Resources: http://www.fixerp.com/blog/member.asp?action=view&memName=LorieSteffanoni
Ответить
 
 
0 Susie
07.08.2017 15:46
Aw, this was a very nice post. Finding the time
and actual effort to generate a very good article… but
what can I say… I procrastinate a whole lot and
never seem to get anything done.

Feel free to surf to my web blog :: http://www.humancoder.com: http://H2.gntech.ac.kr/?document_srl=5028799
Ответить
 
 
0 Alberto
08.08.2017 02:22
I have been browsing online more than three hours these days,
but I never discovered any interesting article like yours.
It is beautiful worth sufficient for me. In my view, if all
website owners and bloggers made good content as you probably did, the web can be much more useful than ever before.


Here is my homepage - http://expertdecoders.com/testimonial: http://helenahangartner.com/?option=com_k2&view=itemlist&task=user&id=13876
Ответить
 
 
0 Mariam
10.08.2017 00:46
Hello it's me, I am also visiting this website on a
regular basis, this site is genuinely pleasant and the viewers
are in fact sharing pleasant thoughts.

Here is my webpage - Human captcha solver (http://appsmyandroid.com: http://appsmyandroid.com/user/VKVLou9575485464/)
Ответить
 
 
0 Onita
10.08.2017 01:31
Definitely imagine that which you stated. Your favorite reason seemed to be at the web the easiest factor to have in mind of.
I say to you, I definitely get irked at the same time as people consider worries that they just don't understand about.
You managed to hit the nail upon the highest and outlined out
the whole thing with no need side effect , people can take a signal.
Will probably be again to get more. Thank you

my web page - Fastest captcha solving service: http://vipayinc.com/?option=com_k2&view=itemlist&task=user&id=26345
Ответить
 
 
0 Mohamed
10.08.2017 10:36
It's appropriate time to make some plans for
the long run and it's time to be happy. I have read this publish and if I may just I desire
to counsel you few attention-grabbing things or
suggestions. Maybe you can write subsequent articles regarding this article.

I want to learn even more issues approximately it!



Here is my blog http://www.humancoder.com/: http://Topcams.ukmilfcams.com/index.php?a=stats&u=faepurvis01867
Ответить
 
 
0 Chase
10.08.2017 15:54
Thank you for the auspicious writeup. It in fact
was a amusement account it. Look advanced to far added agreeable from you!

However, how could we communicate?

My web-site - captcha bypass service: http://rojanmezon.com/index.php/fa/component/k2/itemlist/user/178925
Ответить
 
 
0 Manuel
12.08.2017 11:33
Ahaa, its pleasant conversation on the topic of this article here at this weblog,
I have read all that, so at this time me also commenting here.


Look into my web blog; captcha bypass service (Herman: http://kt96.com/comment/html/index.php?page=1&id=33365)
Ответить
 
 
0 Jorge
12.08.2017 22:09
Thanks for one's marvelous posting! I definitely enjoyed reading it, you can be a great author.I will make certain to bookmark your
blog and will come back down the road. I want to encourage you to
ultimately continue your great writing, have a nice morning!


Feel free to visit my web site - http://www.humancoder.com/: http://maxx.gotoip2.com/blog/member.asp?action=view&memName=Quincy79H674736585061
Ответить
 
 
0 Filomena
18.08.2017 15:59
Ridiculous quest there. What occurred after? Take care!

My page: decode captcha online: http://Captchacoder.com
Ответить
 
 
0 Phillip
19.08.2017 10:58
I think this is among the such a lot significant info for me.
And i'm glad reading your article. But wanna statement on few basic things, The website style is
perfect, the articles is in point of fact nice : D.

Good activity, cheers

Feel free to visit my blog: Imacro captcha Solver: http://captchacoder.com
Ответить
 
 
0 Shavonne
19.08.2017 23:48
Great post but I was wanting to know if you could write a litte more on this topic?
I'd be very thankful if you could elaborate a little bit further.

Many thanks!

my site: Captcha solver free: http://captchacoder.com/2017/07/23/best-ideas-for-marketing-your-business-on-line-now/
Ответить
 

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


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