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.
Привет! Вопрос можно ли в инет эксплорере вывести журнал посещений с помощью 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.
Sorry, I never worked with Rico :-(
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 выдает битую кодировку
Как можно совместить ajax_form и ajax_update ?
Задача – после сабмита формы, если есь ошибки заполнения с помощью ajax_update вписываем описания ошибок над элементами формы.
Если ошибок нет, на месте формы пишем “Success”
Схожи по смыслу вопрос:
Как заставить работать ajax_update по сабмиту формы (с передачей параметров/значений элементов формы) ?