In my previous post I’ve described several simple AJAX plugins. Now I’ll show how to use one of them — ajax_form — in real applications. I think this is the most powerful plugin therefor I’ll dwell on it more elaborately.
Most of Web-forms has variuos validation mechanisms. Simplest way is to process form on the server and parse result on client, where return data can be in following format:
1 2 | true;User was registered successfully;http://example.com/login/ false;Please enter your name;Entered passwords doesn't match |
Result string can be splitted on client and results can be shown in some part of page. Process function may looks like following (it’s part of smarty_ajax):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var SmartyAjax = { onSubmit: function(originalRequest) { var results = originalRequest.responseText.split(";"); if (results[0] == "true") { SmartyAjax.Messages.set(results[1], SmartyAjax.Messages.MT_WARNING) } else { SmartyAjax.Messages.clear(); SmartyAjax.Messages.setType(SmartyAjax.Messages.MT_ERROR); for (var i = 1; i < results.length; i++) { SmartyAjax.Messages.add(results[i]); } } } } |
This function uses several functions from SmartyAjax.Messages object which depends on following HTML elements:
1 2 3 4 | <div id="messages"> <p id="messages-title"></p> <ul id="messages-list"></ul> </div> |
To manage messages I’ve created Smarty template parts/warnings.tpl. You can use it in your PHP file in simple way:
1 2 3 4 | // is messages contains warning (or error) $t->assign('messages_warning', true); // array of messages $t->assign('messages', array('Please provide your account information')); |
Another thing we need to examine is message which informs user about processing AJAX request. There is SmartyAjax.Process object in the sample which has two methods: hide() and show() which can be used to hide and display message. They are depends on HTML-element with id=”ajax-process”. It’s necessary to add “position: absolute” style because of this messages will be shown in top-right corner of screen independing on scroll position.
ajax_form is simple to use:
1 2 3 | {ajax_form method="post" id="form_register"} Any form-element can be placed here {/ajax_form} |
Possible parameters:
- url – URL for AJAX-query (when no URL was specified current one will be used)
- method – query method (by default get, can be get or post)
- params – URL-encoded parameters
- id – form ID
- callback – JavaScript function which will be called when query will be completed
Example can be found here, and full sources can be downloaded here.
Мне кажется, что такие вещи существенно облегчат написание кода многим программистам. По этому было бы не плохо развивать и далее связку Smarty+AJAX. Так держать!
Есть вопросы:
И еще. Прости Критик, что пишу не по теме, но все же. “Мне кажется, что такие вещи существенно облегчат написание кода многим программистам.” – что за фраза? что-то от нее несет каким-то популизмом или чем-то в этом роде.
1. Response can be a simple text string or an XML document DOM (Document Object Model). The two request object response properties you will use for working with a response are responseText and responseXML. The DOM object stored in responseXML is a completely accessible DOM that can be manipulated and traversed in the same way that your HTML document can be. The responseText property is used when a simple text string is sent by the server.
2. About cross-domain AJAX you can look at following:
http://benlog.com/articles/2006/02/14/cross-domain-ajax
http://benlog.com/articles/2006/02/15/cross-domain-ajax-2
http://getahead.ltd.uk/ajax/cross-domain-xhr
Erka, это никакой не популизм, а мое личное мнение. Мне кажется, что с помощью такой технологии проще, например, проверить вводимые данные на стороне клиента, да и работает шустренько.
А на счет того, что “облегчат написание кода многим программистам”, так все мы знаем, что программисты ЛЕНИВЫ, а вот заюзать “под себя” то, что не поленился сделать другой программист за нас всегда приятно :). Тем более, что довольно-таки полезная вещь.
Можно ли как-то обойти проблему с кодировкой кирилицы без кодирования контента Ajax-сервером при его отдачы ? У меня в Опере все нормально, а IE выводит непонятніе символы
Можете сказать, какую кодировку Вы используете и какая версия PHP установлена на сервере?
Спасибо за ответ, Дмитрий!
Apache/1.3.31
PHP 4.2.2
Получаеться меняю тестовый Ваш шаблон about.tpl, добавляю туда рус. текст, при просмотре “About” с Вашего примера в Опере все нормально, а в ИЕ непонятные символы. Я думал iconv в Юникод перекодировать, но еще хуже :(
P.S: Может у меня что-то с ПХП?
Нет, с PHP у Вас все в порядке :-) Во-первых, вы нашли небольшой баг в моих примерах. В page.tpl в строке
{$lang.charset} следует заменить на Вашу кодировку, например так:
Теперь русский отображается нормально, но AJAX-запросы возвращают текст в неправильной кодировке (по умолчанию UTF-8). Все, что нужно, это указать правильную кодировку страницы в response. Это можно сделать так (index.php):
2
3
4
5
global $t;
header('Content-Type: text/html; charset=windows-1251');
$t->display('introduction/' . $_GET['page'] . '.tpl');
}
Я обновил примеры на сайте, теперь в about добавлена фраза на русском.
Дмитрий, спасибо большое!
Все получилось ;)
Всегда рад помочь :-)
Хорошие примеры. Будем использовать, и впоследствии расширять. Спасибо.
Меня заинтересовал вопрос об “responseText или responseXML”.
XML – хороший способ сохранить или передать структурированые данные, но есть еще одна альтернатива – JSON (Javascript Object Notation) http://www.json.org, советую посмотреть http://www.json.org/xml.html где сравниваются обе технологии.
JSON позволяет передавать переменные и даже целые обьекты из одного языка в другой, например:
PHP file
2
3
print $json->encode($fooArray); // Convert php to json
// Output: {"uname":"Sokol", "uemail":"[email protected]"}
HTML file
2
alert('User name: '+fooArray.uname+' Email: '+fooArray.uemail);
В отличии от XML здесь не нужно ничего парсить и к тому же данные в JSON формате занимают меньше места чем в XML.
Надеюсь мои комментарии окажутся полезными.
Большое спасибо за комментарий
Я уже давно присматриваюсь к этой технологии (в частности к ее реализации в Zend Framework – классу Zend_Json). Но все руки никак не дойдут хорошенько разобраться :-)
Пользуемся технологией типа ajax с dklab.ru она куда гибче и кроссплатформенее , легче в понимании…
всё прекрасно отрабатывается удаленно и в Opera и в MSIE и в FireFox, сам 2 минуты назад проверил
dklab действительно предложили интересный вариант использования технологии асинхронных запросов. Но я бы поспорил по поводу удобства использования, легкости понимания и особенно перспектив. Ведь до сих пор ни один браузер не имеет нормальной поддержки CSS, почему же многие стараются использовать эту технологию, а не таблицы? В общем это все флейм, в любом случае спасибо за ссылку.
Может это и флейм :) но…
Конечно AJAX поддерживают IBM, SUN и т.п. фирмы, что сразу за собой тянет развитие технологии… но честно говоря реализация dklab проще все же (может для меня и dklab : токо ), как говорят “всё гениальное просто”
по легкости…. ну не знаю, прочтя статью в конце я уже всему научился (потому что сам долгое время шел к этому (разрабатывал))… еще час потратил на js библиотечку и всё – у меня есть универсальный инструмент… простой и самое главное отлично работающий и самое главное кроссбраузерный!
И использовать надо то кому нравиться, можно использовать zend framework а можно писать свои классы, главное не зацикливать тогда прогресса не будет и т.п. Просто я смотрел много cms все сделаны почти одинаково, что огорчает, хотя есть масса путей реализации другой архитектуры к тому же более гибкой и простой…
т.е. всегда должна быть “конкуренция” и возможность выбора…
плохо то что у dklab нет хорошего маркетинга и рекламы..
на open source тяжело зарабатывать :\
Добрый день! Плагин просто супер! Спасибо!
Как можно пообщаться с Вами поподробнее!?
С уважением, Александр
Very very nice job, I like it ! ;)
Could you post an example using the callback function ? I’m trying to call a javascript function after the request is completed but it’s called before ! I want to call a javascript function when form is completed without error to change page location, is it possible ?
Regards.
Hello, David
You can look at chat sample in the article’s sources.
There is following construction in the template file chat.tpl:
Below this you can find JavaScript (unnecessary things are stripped out):
2
3
4
5
6
onMessageSent: function() {
Field.clear("message");
Field.focus("message");
}
}
In this sample function onMessageSent will be called when request will be completed.
Plugin ajax_form does supports callback param too.
Thanks, it works. I didn’t understand the callback function completely replaced your function “OnSubmit”.
Do you thinks it’s possible to use callback with ajax_update too ? ;) I tried to add that (in the ajax_update plugin, etc) but the callback function is not called when completed… Did you tried too ?
i look into ajax_update , onComplete: callback, i try to use callback too with ajax_update, but nothing triggerred after update complete, same question with David ..
[…] ・ajaxフォームの解説記事 Dmytro Shteflyuk’s Home » Blog Archive » AJAX-enabled Smarty plugins Part 2: ajax_form […]
You know about XAJAX, it ‘ s a framework, who work with ajax applications
and have a link with Smarty, to answer the same prob;em, no?
Hi Alexander
I know XAJAX and used it a little, but I don’t know if it has Smarty bindings
Da, ya vchera prochetal ob etom, ya ne znakom s XAJAX, no sabirayus izuchat.
Menia interesuyet sviazivat Smarty s Ajax.
Nedavno scachal knigu Smarty PHP Template Programming and Applications.
Tam est tema ob kontrole obnavlenie shablona, dumaiu eto kak raz chto nada, php script.
Skazhite esli ya oshebayus.
Привет document.write(”)
for (i=0; i’+window.history.previous+”)
}
document.write(”) в IE выводит одни undefined
Не знаешь че можно предпринять
сорри document.write(”)
for (i=0; i’+window.history.previous+”)
}
document.write(”)
скрипт не выводиться , но проблему изложил вроде ответь плз
2Flaviy: По ходу съелись тэги
Попробуй использовать < вместо < и > вместо >
Имеется в виду комментарий :-)
Привет! Вопрос можно ли в инет эксплорере вывести журнал посещений с помощью JavaScript. типа window.history.previous. по форумам нашел только для нетскейпа.
[…] http://kpumuk.info/ajax/ajax-enabled-smarty-plugins-part-2-ajax_form/ […]
Попробовал. Ничего не получается. Запрос вроде посылается, но до PHP точно не доходит….
Всё конечно интересно, но как заставить чат отображать записи по русски?
Буду очень благодарен за совет.
Отличная вещь. Можно такой вопрос:
onComplete: callback -> возможно ли в функцию callback (напомню, что callback – функция JavaScript, которая будет выполнена по завершении запроса) передать объект originalRequest и уже в callback устроить “разбор полетов” с этим объектом? Заранее признателен за помощь.
Спасибо. Ступил. В сигнатуре самой функции callback нужно написать просто
callback (originalRequest)
{
… код…
responseXml = originalRequest.responseXML;
… код …
}
, а не callback(SmartyAjax.originalRequest)
{
… код …
}
Спасибо за отличный плагин.
Делаю сайт с использованием вашего плагина (добавил пару ф-ций, обновил Prototype до 1.5.0) и Rico 1.1.2 (http://openrico.org/rico/). Как только добавляю rico.js к страницам, ajax_form перестает работать. Processing… появляется, а запрос не идет.
Буду признателен за помощь.
Интересно, а данные из тега отправляются? Мне лично не получается передать файл на сервер.
Сорри, добавление к комментарию выше. Я имел в виду тег:
I like this initiative, much easier than xajax.
I tried it, but ran into a problem:
When using a pulldown, the value does not get posted back.
e.g.: […options…]
{literal}
var getmaand = {
params: function() {
return {
showmonth: $F(“showmonth”)
}
}
}
{/literal}
Checking my php with print_r($_GET) and print_r($_POST) the month does not return.
Please advise.
[lang_en]Sorry, I never worked with Rico :-([/lang_en]
[lang_ru]Сорри, никогда не работал с Rico :-([/lang_ru]
Linin, файлы невозможно загрузить, используя технологию AJAX. Для этого можно воспользоваться отправкой формы в скрытый iframe, более подробно описано здесь.
Is there any way to incorporate $_FILE for file upload support?
Hello Dmytro,
I’m trying to use ajax_form with the callback to change to nextpage.php if the form is OK.
The callback is called, but allways, also if the form is NOT good.
I did not understand the solution you gave to David, since that is from the chat example.
Can you help ?
I have:
2
3
4
5
6
7
8
{
document.form_register.action = "nextpage.php";
document.form_register.submit();
return false; // Is this required??
}
var finishcallback = finishfunc;
and
2
3
...
{/ajax_form}
Thanks, Alexander
а можно прикрутить к mootools smarty ?
Очень бы пригодилось,если бы объяснили как сделать автоматический запрос данных при смене опций в теге … а как продолжение как составить цепочку зависимых
я имел ввиду тег select
Кто-нить может объяснить нормально, как в любой цивилизованной документации к любому плагину (например, к тому же Smarty), как использовать эти плагины?
Если полностью скачать архив и запустить – работает… Но как только начинаешь приспосабливать к своему проекту, ничего не пашет. Вообще ничего!
1. Какие файлы из Smarty нужно заменить?
2. В какие каталоги какие файлы нужно добавить?
3. Где и какие пути должны быть прописаны?
4. Где можно скачать каждый из, с позволения сказать – плагин, по отдельности?
5. Как вообще его устанавливать?
И много других вопросов. Такое ошущение, что те, кто тут обсуждают это дополнение месяц сидели, это всё писаль, а тут просто продолжают обсуждать… А где начало?
Понятно, что тут мне никто ничего не должен, но тем не менее… Возможно плагин и хорош, во всяко случае необходим однозначно, но как он приподносится – ужас!!!
как нужно обрабатывать параметры params
шаблон
php-файл
2
3
4
{$opt = 'view';}
else
{$opt = $_REQUEST['opt'];}
у меня не передается параметр в php файл
пробывал и $_REQUEST, $_POST, $_GET
У меня проблема с русским запрос передает нормально! но в php файле если в форме были русские символы даже с заголовком 1251 выдает битую кодировку