AJAX-enabled Smarty plugins Part 2: ajax_form

Posted by Dmytro Shteflyuk on under JavaScript, PHP · Русский (51,343 views)

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.

52 Responses to this entry

Subscribe to comments with RSS

said on December 7, 2006 at 3:26 pm · Permalink

Привет! Вопрос можно ли в инет эксплорере вывести журнал посещений с помощью JavaScript. типа window.history.previous. по форумам нашел только для нетскейпа.

Mihail
said on December 11, 2006 at 4:52 pm · Permalink

Попробовал. Ничего не получается. Запрос вроде посылается, но до PHP точно не доходит….

Jek
said on December 18, 2006 at 10:26 am · Permalink

Всё конечно интересно, но как заставить чат отображать записи по русски?
Буду очень благодарен за совет.

Linin
said on January 25, 2007 at 4:47 pm · Permalink

Отличная вещь. Можно такой вопрос:
onComplete: callback -> возможно ли в функцию callback (напомню, что callback – функция JavaScript, которая будет выполнена по завершении запроса) передать объект originalRequest и уже в callback устроить “разбор полетов” с этим объектом? Заранее признателен за помощь.

Linin
said on January 25, 2007 at 5:45 pm · Permalink

Спасибо. Ступил. В сигнатуре самой функции callback нужно написать просто
callback (originalRequest)
{
… код…
responseXml = originalRequest.responseXML;
… код …
}
, а не callback(SmartyAjax.originalRequest)
{
… код …
}

Mihail
said on February 1, 2007 at 1:32 am · Permalink

Спасибо за отличный плагин.
Делаю сайт с использованием вашего плагина (добавил пару ф-ций, обновил Prototype до 1.5.0) и Rico 1.1.2 (http://openrico.org/rico/). Как только добавляю rico.js к страницам, ajax_form перестает работать. Processing… появляется, а запрос не идет.

Буду признателен за помощь.

Linin
said on February 6, 2007 at 10:07 am · Permalink

Интересно, а данные из тега отправляются? Мне лично не получается передать файл на сервер.

Linin
said on February 6, 2007 at 10:10 am · Permalink

Сорри, добавление к комментарию выше. Я имел в виду тег:

1
<input type="file" name="nameFile" value="" />
Guido Smit @
said on February 12, 2007 at 2:14 pm · Permalink

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.

said on February 22, 2007 at 1:09 am · Permalink

Linin, файлы невозможно загрузить, используя технологию AJAX. Для этого можно воспользоваться отправкой формы в скрытый iframe, более подробно описано здесь.

said on June 6, 2007 at 11:19 pm · Permalink

Is there any way to incorporate $_FILE for file upload support?

said on August 31, 2007 at 3:10 pm · Permalink

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:

1
2
3
4
5
6
7
8
function finishfunc()
{
    document.form_register.action = "nextpage.php";
    document.form_register.submit();
    return false;  // Is this required??
}

var finishcallback = finishfunc;

and

1
2
3
{ajax_form method="post" id="form_register" callback='finishcallback'}
...
{/ajax_form}

Thanks, Alexander

Valerij
said on January 22, 2008 at 8:37 pm · Permalink

а можно прикрутить к mootools smarty ?

Raul @
said on January 27, 2008 at 4:16 pm · Permalink

Очень бы пригодилось,если бы объяснили как сделать автоматический запрос данных при смене опций в теге … а как продолжение как составить цепочку зависимых

Raul @
said on January 27, 2008 at 4:17 pm · Permalink

я имел ввиду тег select

AL
said on May 3, 2008 at 11:14 pm · Permalink

Кто-нить может объяснить нормально, как в любой цивилизованной документации к любому плагину (например, к тому же Smarty), как использовать эти плагины?
Если полностью скачать архив и запустить – работает… Но как только начинаешь приспосабливать к своему проекту, ничего не пашет. Вообще ничего!
1. Какие файлы из Smarty нужно заменить?
2. В какие каталоги какие файлы нужно добавить?
3. Где и какие пути должны быть прописаны?
4. Где можно скачать каждый из, с позволения сказать – плагин, по отдельности?
5. Как вообще его устанавливать?
И много других вопросов. Такое ошущение, что те, кто тут обсуждают это дополнение месяц сидели, это всё писаль, а тут просто продолжают обсуждать… А где начало?
Понятно, что тут мне никто ничего не должен, но тем не менее… Возможно плагин и хорош, во всяко случае необходим однозначно, но как он приподносится – ужас!!!

Grassus
said on September 26, 2008 at 12:58 pm · Permalink

как нужно обрабатывать параметры params
шаблон

1
{ajax_form method="post" id="form_register" params="opt=save"}

php-файл

1
2
3
4
if (!isset($_REQUEST['opt']))
  {$opt = 'view';}
else
  {$opt = $_REQUEST['opt'];}

у меня не передается параметр в php файл
пробывал и $_REQUEST, $_POST, $_GET

SID
said on November 1, 2008 at 3:59 pm · Permalink

У меня проблема с русским запрос передает нормально! но в php файле если в форме были русские символы даже с заголовком 1251 выдает битую кодировку

Termiton @
said on November 20, 2008 at 10:21 am · Permalink

Как можно совместить ajax_form и ajax_update ?

Задача – после сабмита формы, если есь ошибки заполнения с помощью ajax_update вписываем описания ошибок над элементами формы.
Если ошибок нет, на месте формы пишем “Success”

Termiton @
said on November 20, 2008 at 10:26 am · Permalink

Схожи по смыслу вопрос:
Как заставить работать ajax_update по сабмиту формы (с передачей параметров/значений элементов формы) ?

More comments: 1 2

Comments are closed

Comments for this entry are closed for a while. If you have anything to say – use a contact form. Thank you for your patience.