Сегодня я написал простые плагины для Smarty, поддерживающие AJAX. Я не пытался разработать мощный фреймворк для веб-приложений,- просто хотелось дать идею, как можно интегрировать AJAX-технологию в Smarty. Но если у Вас есть любые предложения по улучшению системы, или Вы просто хотите отправить отзыв, оставьте комментарий на сайте.
На практике мне нужно несколько вещей от AJAX: обновить некоторые узлы DOM, отправить форму на сервер без перегрузки страницы, получить некоторые значения или выполнить вычисления на стороне сервера (возможно с использованием базы данных или других серверных ресурсов). Необходимо написать кучу кода JavaScript для реализации этих требований, даже несмотря на использование замечательной библиотеки JavaScript Prototype.
Я решил подружить Smarty и AJAX. Вот три плагина Smarty, которые были созданы: ajax_update, ajax_call, ajax_form. Ниже я опишу все эти плагины.
ajax_update
Эта функция Smarty может быть использована для обновления некоторых частей веб-страницы.
Пример использования:
1 2 | <a href="#" onclick="{ajax_update update_id='intro_content' function='update_intro' params='page=about'}">О нас</a> |
Возможные параметры:
- url – URL для AJAX-запроса (если не указан URL, будет использован текущий)
- method – метод запроса (по умолчанию get, может быть get или post)
- update_id – ID элемента HTML для обновления
- function – имя функции PHP, которая будет вызвана
- params – URL-закодированные параметры
ajax_call
Эта функция Smarty может быть использована для вызова PHP-функции на стороне сервера и получения результатов ее вывода.
Пример использования:
1 2 | <a href="#" onclick="{ajax_call function='calculate' params_func='calc_params' callback='calc_cb'}">Посчитать</a> |
Возможные параметры:
- url – URL для AJAX-запроса (если не указан URL, будет использован текущий)
- method – метод запроса (по умолчанию get, может быть get или post)
- function – имя функции PHP, которая будет вызвана
- params – URL-закодированные параметры
- callback – функция JavaScript, которая будет выполнена по завершении запроса
- params_func – функция JavaScript, которая используется для вычисления параметров запроса на стороне клиента
ajax_form
Этот блок Smarty может быть использован для отправки веб-форм на сервер без перезагрузки страницы.
Пример использования:
1 2 3 | {ajax_form method="post" id="form_register"} Любой элемент формы может быть размещен здесь {/ajax_form} |
Возможные параметры:
- url – URL для AJAX-запроса (если не указан URL, будет использован текущий)
- method – метод запроса (по умолчанию get, может быть get или post)
- params – URL-закодированные параметры
- id – ID элемента формы
- callback – функция JavaScript, которая будет выполнена по завершении запроса
Примеры
Эти плагины достаточно просты, и я думаю, что любой может создать получше моих. Я всего-лишь хотел показать идею, как можно произвести интеграцию. Рабочие примеры можно найти здесь. Кроме того, Вы можете скачать все исходники.
В общем товарищи конечно без обид, но лучше используйте библиотеку xajax !
Под смарти затачивается на раз !
Дмитрий, а Вы не могли бы уделить немного времени и написать третью часть по использованию данных плагинах, но в этой статье более подробно описать принцип создания и взаимодействия…. если честно, уже столько времени бьюсь и не понимаю многих вещей…вроде и и понятно, но в тоже время не получается… Где то в комментах, некий гражданин выложил улучшенную версию с поддержкой ООП – а это именно то, что меня интересует… просто хочется увидеть мануал, где по этапам расписано, как и что применять…))) Ну если не сложно… Заранее спасибо.
Привет Критик!
Такой вот вопросик по ajax_form:
у тебя в примерах форма сабмититься без перезагрузки страницы по нажатию на кнопку типа submit, а как сделать так, чтобы форма сабмитилась, если например внутри формы есть элемент select и должен происходить сабмит по onchange селекта? Если я пишу в селекте this.form.submit() то происходит перезагрузка страницы.
I am having difficluty processing the ajax form
here. I m building a simple form, which display info in a table format like Name, Age, etc.
e.g. in the register.php example
{ajax_form method=”post” id=”myform”=”index.php?}
…
…
…
if $_POST()…
echo???
{/ajax_form}
is it possible in the $_POST {
instead of using the echo to put the value to an array, can we display a smarty template out e.g.
$smarty->display(outputgrid.tpl”
i.e. want to process the form, and then assign smart values, and then give back to a smarty template.
hello kpumuk,
great work, thank you very much.
i found the params isn’t working when using ajax_update.
can’t figure out why.
this code
2
3
4
5
<li>
<a href="#" onclick="{ajax_update update_id='intro_content' function='view_news' params='page=news&&news_id='$row_obj->news_id' '}">read news</a>
</li>
{foreachelse}
error display
$row_obj->news_id isn’t working
regards,
Nattaphon
hi,
I made a function in index.php getting list of products.
I tpl i called ajax-update function to get list of products in a box.It is giving js-error “Object SmartyAjax not found”.What is my mistake?
hi,
I solved previouse problem.Now I am using ajax_update without function to send params to certain url.I want to send cat_id which is I am getting in section of template page.here is code:
2
3
4
5
6
7
8
<tr>
<td id="category_trid{$category[cat].id}" class="contenttext2">{$category[cat].id}
<a href="#" onclick="{ajax_update update_id='productlist_div' params='catid=`$category[cat].id`&page=product_list_ajax'}">{$category[cat].title}</a>
</td></tr>
{sectionelse}
<tr><td>No category..</td></tr>
{/section}
I am not getting catid value but “$category[cat].id”.why?
but it is giving code text in params not its value
Добрый день.
Дмитрий, у меня вопрос. Есть форма калькулятора.
После submit возвращает на index.php, get параметры не передаются. Если в функции smarty_block_ajax_form убрать action=” – работает, но с перезагрузкой…
Чего не так?
Fatal error: Smarty error: unable to write to $compile_dir ‘/home/hosting/kpumuk.info/samples/smarty_ajax/resources/templates_c’. Be sure $compile_dir is writable by the web server user. in /home/hosting/kpumuk.info/samples/smarty_ajax/include/smarty/Smarty.class.php on line 1095
:-(
2
3
4
5
6
7
8
{foreach from=$artist item=arti}
<OPTION VALUE="{$arti.id}">{$arti.artist_fname}</OPTION>
{/foreach}
<SELECT NAME="sel_art" id="get_collections"></SELECT>
</SELECT>
Hi,
i would like to know if it is possible to call a javascript function before the ajax request will start (to disable form elements or change the text of the button, eg)