Today I’ve created simple AJAX-enabled plugins for Smarty. I don’t try to develop powerful reach-applications framework. I can give you only idea how to integrate AJAX-technology into Smarty. But if you have any offers how to improve anything I’ve described or if you just want to leave feedback please post you comments on my site.
In my practice I need several things from AJAX: to update some nodes in DOM, to send forms without post-back, to retrieve some values or to perform server-side calculation (maybe using database or other server-side resources). It’s necessary to write tons of JavaScript to implement my requirements in spite of using cool JavaScript library Prototype.
I decided to integrate Smarty with AJAX. There are three Smarty plugins has been created: ajax_update, ajax_call, ajax_form. Below all this plugins will be described.
ajax_update
This Smarty function can be used for update some parts of web-page.
Sample usage:
1 2 | <a href="#" onclick="{ajax_update update_id='intro_content' function='update_intro' params='page=about'}">About</a> |
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)
- update_id – ID of HTML element for update
- function – function which will be called
- params – URL-encoded parameters
ajax_call
This Smarty function can be used for call PHP function on server side and retrieve its output.
Sample usage:
1 2 | <a href="#" onclick="{ajax_call function='calculate' params_func='calc_params' callback='calc_cb'}">Calculate</a> |
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)
- function – function which will be called
- params – URL-encoded parameters
- callback – JavaScript function which will be called when query will be completed
- params_func – JavaScript function used when you need custom parameters calculated on client side
ajax_form
This Smarty block can be used for submit Web-forms without post-back.
Sample usage:
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
Samples
These plugins are quite simple and I think everyone can create even better than mine. I’ve just wanted to show you idea how integration can be done. Working examples can be found here. Also you can download full sources.
[...] 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. [...]
Я еще не успел полностью ознакомиться с данной технологией, но она уже мне нравится по просмотренным примерам. Будем изучать.
Hey very cool! keep up the good work!
really a great idea!
Попробовала использовать вышепредложенные плагины. У меня довольно быстро все получилось, хоть до этого с Ajax я была знакома только в теории.
Пара замечаний:
С нетерпением жду ajax_table :) Двигаешься в правильном направлении, так держать :)
hey great job… just one thing… when used in IE, the page gets cached and does not refresh with new content. anyway to solve that?
To prevent IE from caching pages you can add to all url any random string (for example http://somehost.com/index.php?4397593847)
You can do this using JavaScript-function Math.rand() or PHP function mt_rand() or rand().
Another way is to set page headers to disable cache:
2
3
4
5
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
hi,
I have one question:
can i use/call class functions in the ajax_update and ajax_call?
thx
Unfortunately, this is not possible in current version.
I don’t speak inglish, but let me say. Your plugin es really fantastic
[...] AJAX-enabled Smarty plugins (tags: ajax smarty webdev) [...]
клевый ход , так держать
how can smarty section implemented using ajax.
i tryed but got some error.
please help
Hmm. I haven’t understood your problem. Can you provide code that you use?
[...] Bellow is the simple resources of Ajax Enabled Smarty plugins. I got from this site [http://kpumuk.info/ajax/ajax-enabled-smarty-plugins/]. this part of articles In my practice I need several things from AJAX: to update some nodes in DOM, to send forms without post-back, to retrieve some values or to perform server-side calculation (maybe using database or other server-side resources). It’s necessary to write tons of JavaScript to implement my requirements in spite of using cool JavaScript library Prototype. [...]
[...] AJAX-enabled Smarty plugins [...]
This website is Great! I will recommend you to all my friends. I found so much useful things here. Thank you.
hi
its greate job … well i am new to smarty and facing some problem, please help me as i am already using the smarty, now i dont want to change existing smarty setup, without changing the existing smarty configuration and i want to intigrate your AJAX-enabled Smarty plugins in my existing smarty configuration. so can u help me how do i intigrate ur plugin in it??? and as i tryed to intigrate i get syntax error called “unrecognized tag ‘ajax_form’” so pls help me in it.
let me know the steps..
thanx in advance n awaiting for ur reply
regards
-skonealone
hi once again .. as i intigrated the smarty_ajax plugin but still me not able to post the variables to the action page..
when i click on submit button .. nothing is happening..
pls let me know where i am doing wrong..
regards
-skonealone
hi kpumuk,
how can i realize this: (look at the params, need this in smarty foreach)
thx
Hello, mr. ajax
This is standard Smarty future: you can use $variable inside {} in following way:
hello kpumuk,
great work, thank you very much.
i found the callback isn’t working when using ajax_call.
can’t figure out why.
wouldn’t it be better to merge call and update?
at least, ajax_call with a callback to “update a div” would do it.
regards,
gotmyredhaton
Ajax without XML????? I can’t understand, I need XML…
Hi, congratulations for this plugun, its fantastic. But, how i can auto-load update intro in a div element?? onLoad event cannot load update_intro, only onclick is possible!!! Thanks
Hi, I want to use update to do that on some part, process a code and show the same smarty templated thing every 1 second.
Should pasting a line like {ajax_update update_id="intro_content"
function="update_intro" params="page=about"} inside the javascript function that trigger timers work? Will that make it to recalculate the smarty templated code i wan to show or it’s already locked?
Hi Franco!
Just look at the examples. In chat.php and corresponding Smarty template you can find periodically updated part of page. Think it can help you.
thank you very much, you were very helpfull
Szenna’s comment inspired me to modify smarty_ajax to support calling object methods from ajax_call and ajax_update. I added an optional parameter “object” to both so you can call the function as a method of an object.
If you need this functionality, you can get it from http://logankoester.com/smarty_ajax/
@Kpumuk: Are you interested in incorporating my patch in the next release of smarty_ajax?
Hi, nice very nice page..!
Good luck !
Отличные плагины!
Спасибо тебе! Был бы очень рад увидеть еще плагины для смарти…
Это то, чего давно не хватало смарти.
идейа плагина очинь харошайа . пешы йищо
Your chat is really nice! Is it possible to use mysql instead of chat.txt. I tried to include a Database update … but it wont work.
Sure it’s possible. Can you show me your code? Will try to help you connect db.
I tried to modify the function add message … but i think i am on the wrong way … if i press send … nothing happens and no entry in db.
2
3
4
5
include_once( 'init.php' );
$sql11 = 'INSERT INTO ! ( from_user, username, act_time, message) values( ?, ?, ?, ? )';
$db->query( $sql11, array( CHAT_TABLE, '21', 'test', '456465', $_POST['message'] ) );
}
Dear Kpumuk!
Your plugin is very useful.
A question about ajax_form:
I have a registration form. I have successfully made the ajax validation. I’d like to hide the form input fields upon successful registration and display a close button ( I am developing a prototype window enabled ajax application, the registration form is in inside a prototype window).
Thank you in advance.
Пытаюсь прикрутить плагины к движку, который работает на смарти (koobi).
Строка
About
Вызывает ошибку
Не в курсе, почему такая ошибка возникает?
Скорее всего, плагины не скопированы в каталог plugins, или ошибка с настройками путей. Посмотрите в моих примерах, там есть пример, как настроить поддержку нестандартного пути.
I use this AJAX Smarty plugins, but i has problem with this characters: ó,ú,í,ú,á,ñ
when use this technology
[...] http://kpumuk.info/ajax/ajax-enabled-smarty-plugins/ [...]
[...] Under normal circumstances, once you’ve passed your footer template to Smarty->display(), you’re done. There’s no going back without a refresh. Well, that was before Dmytro Shteflyuk wrote a sexy PHP library, aptly named smarty_ajax. [...]
hi, congratulations the plugin is fantastic!!! about the back button on browser?
ps: I don’t speak english very well.
problems with ã, ç, é, ô, í see here
Hi ,
I have a problem with ajax_call.Below is the code–
/Click for first details/
Now I want to pass certain parameters such as id=20,location_id=30, which is to be used by the testfunction for database query. How do I do it?
Hi,
I’d like to use autosuggest on a smarty-ajax enabled page.
But I get the following error:
2
3
Source File: http://ctsz.osiris/admin/js/smarty_ajax/smarty_ajax.js
Line: 8
autosuggest can be found here.
Do you have any idea?
Thank you very much.
Igor
Hi Dmytro,
very interesting smarty plugin you have made, but please, what do I have to do, if I want the form I submit to be displayed again onsubmit?
My form already includes highlighting of the fields with wrong data input, set by the php script. So all I want is to extend the form with your Smarty AJAX script for submitting (post) and getting the same form page.
Best regards
Philipp
AJAX pluginy pro Smarty…
AJAXové rozšíření pro šablonový systém Smarty nabízí Dmitrij Štefljuk
…
использую ajax_form
по моему работает не совсем корректно, а именно:
при наличии на форме нескольких элементов с типом submit значение всех их отправляется на сервер
Добрый день Дмитрий!
У меня проблема такая.
Использую ajax_update , но контент для обновления берется из яваскрипта такого рода:
Это новостная лента.
Так вот ajax_update его содержимое не выводит в
Любую статику или локальные данные выводит нормально!
Как быть?
Спасибо.
Здравствуйте
Чтобы выполнять JavaScript, который пришел в AJAX ответе, придется немного поправить smarty_ajax.js. Метод update, который сейчас выглядит так:
2
3
4
5
6
7
8
9
10
var myAjax = new Ajax.Updater(
update_id,
url,
{
method: method,
parameters: params,
onComplete: callback
});
},
Нужно добавить опцию evalScripts:
2
3
4
5
6
7
8
9
10
11
var myAjax = new Ajax.Updater(
update_id,
url,
{
method: method,
parameters: params,
onComplete: callback,
evalScripts: true
});
},
Да, в последнем комментарии вы ошиблись при вставке кода, закрывающий тег — </code>. Извиняюсь, это у меня ошибка в подсказке, и я ее сейчас исправлю.
Is it possible to use this for uploading images and other files. Right now, it wont let me, everything else works great. Any help on this? Thanks
Добрый день!
Не помогло!
2
3
4
<p>
<script language="JavaScript1.2" src="http://img.lenta.ru/r/js/t111.js" type="text/javascript"> </script>
</p>
Этот скрипт всё равно не выводится функцией update_intro
Выводятся только слова – Глобальная новостная лента…
Добрый день, Вера
Да, действительно, так оно не будет работать в связи с тем, что подключение внешних скриптов не работает автоматически. Скорее всего придется разобрать response вручную с помощью регулярных выражений, и затем подключить файл со скриптом.
Вот по-быстрому набросал пример (s — это текст, который Вы получаете в результате AJAX-запроса (проверил в IE и Firefox).
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fragment = '<script[^>]*src="([^"]*?)"[^>]*>([\u0001-\uFFFF]*?)<\/script>';
var matchAll = new RegExp(fragment, 'img');
var matchOne = new RegExp(fragment, 'im');
var scripts = s.match(matchAll) || [];
for (var i = 0, length = scripts.length; i < length; i++) {
var matches;
if (matches = scripts[i].match(matchOne)) {
var script = document.createElement('SCRIPT');
script.src = matches[1];
script.type = 'text/javascript';
document.body.appendChild(script);
}
}
Не совсем понятно куда этот JSкрипт вставлять!
Я его вызываю и newsline.tpl
2
3
4
<p>
<script language="JavaScript" type="text/javascript" src="newsline.js"></script>
</p>
который запускается Smatry из функции intro_update
Не выводит ничего
Я кстати не Вера! Меня Дмитрий зовут… :)
Ой, простите, попутал. email показался похожим :-) А Вы часом не из Котовска?
Тэкс, относительно скрипта. Придется чуток поправить smarty_ajax.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var myAjax = new Ajax.Updater(
update_id,
url,
{
method: method,
parameters: params,
onComplete: callback || this.onUpdate
});
},
onUpdate: function(originalRequest) {
var result = originalRequest.responseText;
var fragment = '<script[^>]*src="([^"]*?)"[^>]*>([\u0001-\uFFFF]*?)<\/script>';
var matchAll = new RegExp(fragment, 'img');
var matchOne = new RegExp(fragment, 'im');
var scripts = result.match(matchAll) || [];
for (var i = 0, length = scripts.length; i < length; i++) {
var matches;
if (matches = scripts[i].match(matchOne)) {
var script = document.createElement('SCRIPT');
script.src = matches[1];
script.type = 'text/javascript';
document.body.appendChild(script);
}
}
},
Вроде бы должно помочь…
Кстати, тезка, может ICQ (107989380) — тогда решим Вашу проблему быстрее вместе :-)
то что искал. Спасибо.
Привет!
Возможно ли решить такую задачу? Как-то заставить работать document.forms.poll_update.submit();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
...
...
{/ajax_form}
<script language="javascript">
function submit_av(originalResponse)
{ldelim}
$("user_poll").innerHTML = originalResponse.responseText;
{rdelim}
</script>
<a href=# onclick="check()">VOTE</a>
<script language="javascript">
function check()
{ldelim}
document.forms.poll_update.vote.value=6;
document.forms.poll_update.submit();
{rdelim}
</script>
Hey this is a great library, thanks very much.
Is there a way of getting smarty to process the output. For instance, in my HTML I have
2
3
//build a table of faItems
{/section}
In my php I create the faItems array. I would like to be able to update this object remotely and re-display it. Can I do this?
I have tried
But of course it does not work
Люди есть проблема! В FireFox 2.0.0.6 и Опера 9.23 РАБОТАЕТ ВСЕ замечательно! ( {ajax_update} )
А вот в ИЕ6 НЕТ. В чем может быть проблема? Плз.
А как через ajax_update обновить список select ?
В общем товарищи конечно без обид, но лучше используйте библиотеку 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)