AJAX-enabled Smarty plugins

Posted by Dmytro Shteflyuk on under PHP

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.

71 Responses to this entry

Subscribe to comments with RSS

dnk
said on June 1st, 2007 at 14:44 · Permalink

Добрый день!
Не помогло!

1
2
3
4
<h2>Глобальная новостная лента</h2>
<p>
  <script language="JavaScript1.2" src="http://img.lenta.ru/r/js/t111.js" type="text/javascript"> </script>
</p>

Этот скрипт всё равно не выводится функцией update_intro
Выводятся только слова – Глобальная новостная лента…

said on June 1st, 2007 at 15:07 · Permalink

Добрый день, Вера
Да, действительно, так оно не будет работать в связи с тем, что подключение внешних скриптов не работает автоматически. Скорее всего придется разобрать response вручную с помощью регулярных выражений, и затем подключить файл со скриптом.

Вот по-быстрому набросал пример (s — это текст, который Вы получаете в результате AJAX-запроса (проверил в IE и Firefox).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var s = "<script src=\"http://img.lenta.ru/r/js/t111.js\" type=\"text/javascript\"><\/script>";

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);
    }
}
dnk
said on June 1st, 2007 at 16:09 · Permalink

Не совсем понятно куда этот JSкрипт вставлять!
Я его вызываю и newsline.tpl

1
2
3
4
<h2>Глобальная новостная лента</h2>
<p>
<script language="JavaScript" type="text/javascript" src="newsline.js"></script>
</p>

который запускается Smatry из функции intro_update

Не выводит ничего
Я кстати не Вера! Меня Дмитрий зовут… :)

said on June 1st, 2007 at 16:43 · Permalink

Ой, простите, попутал. email показался похожим :-) А Вы часом не из Котовска?

Тэкс, относительно скрипта. Придется чуток поправить smarty_ajax.js

1
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
  update: function(update_id, url, method, params, callback) {
    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);
      }
    }
  },

Вроде бы должно помочь…

said on June 1st, 2007 at 16:44 · Permalink

Кстати, тезка, может ICQ (107989380) — тогда решим Вашу проблему быстрее вместе :-)

said on June 1st, 2007 at 17:38 · Permalink

то что искал. Спасибо.

Alex
said on June 15th, 2007 at 17:13 · Permalink

Привет!
Возможно ли решить такую задачу? Как-то заставить работать document.forms.poll_update.submit();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{ajax_form method="post" id="poll_update" url="index.php?p=news&amp;area=$area&amp;newsid=$newsid" callback="submit_av"}
...
...
...
{/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>
Alex
said on June 19th, 2007 at 20:55 · Permalink

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

1
2
3
{section name=i loop=$faItems}
  //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

1
$t->assign('faItems', $faItems);

But of course it does not work

Николай
said on August 14th, 2007 at 19:15 · Permalink

Люди есть проблема! В FireFox 2.0.0.6 и Опера 9.23 РАБОТАЕТ ВСЕ замечательно! ( {ajax_update} )
А вот в ИЕ6 НЕТ. В чем может быть проблема? Плз.

Александр
said on October 5th, 2007 at 14:52 · Permalink

А как через ajax_update обновить список select ?

Александр
said on October 6th, 2007 at 15:15 · Permalink

В общем товарищи конечно без обид, но лучше используйте библиотеку xajax !
Под смарти затачивается на раз !

said on November 13th, 2007 at 10:03 · Permalink

Дмитрий, а Вы не могли бы уделить немного времени и написать третью часть по использованию данных плагинах, но в этой статье более подробно описать принцип создания и взаимодействия…. если честно, уже столько времени бьюсь и не понимаю многих вещей…вроде и и понятно, но в тоже время не получается… Где то в комментах, некий гражданин выложил улучшенную версию с поддержкой ООП – а это именно то, что меня интересует… просто хочется увидеть мануал, где по этапам расписано, как и что применять…))) Ну если не сложно… Заранее спасибо.

Vovanovski
said on November 30th, 2007 at 15:15 · Permalink

Привет Критик!
Такой вот вопросик по ajax_form:
у тебя в примерах форма сабмититься без перезагрузки страницы по нажатию на кнопку типа submit, а как сделать так, чтобы форма сабмитилась, если например внутри формы есть элемент select и должен происходить сабмит по onchange селекта? Если я пишу в селекте this.form.submit() то происходит перезагрузка страницы.

digitalapha
said on February 6th, 2008 at 06:50 · Permalink

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.

said on March 26th, 2008 at 14:54 · Permalink

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

1
2
3
4
5
{foreach from=$DB_RESULTS item=row_obj key=news_id }
<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

1
Catchable fatal error: Object of class stdClass could not be converted to string in F:\Website\www\e-job_V2\resources\templates_c\%%3C^3CF^3CFBC54C%%news.tpl.php on line 43

$row_obj->news_id isn’t working

regards,
Nattaphon

fauzia
said on April 1st, 2008 at 09:50 · Permalink

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?

fauzia
said on April 1st, 2008 at 10:50 · Permalink

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:

1
2
3
4
5
6
7
8
{section name=cat loop="$category"}    
 <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

said on April 4th, 2008 at 21:38 · Permalink

Добрый день.

Дмитрий, у меня вопрос. Есть форма калькулятора.

1
{ajax_form method="post" id="calculator" url="index.php" params="task=calculator&amp;param=$someparam"}

После submit возвращает на index.php, get параметры не передаются. Если в функции smarty_block_ajax_form убрать action=” – работает, но с перезагрузкой…
Чего не так?

said on July 3rd, 2008 at 15:45 · Permalink

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

:-(

raj
said on September 17th, 2008 at 09:22 · Permalink
1
2
3
4
5
6
7
8
<SELECT NAME="sel_art" onchange="{ajax_update update_id="get_collections" function="show_collections" url="get_collections.php" params="artist_id=1"}">        
            {foreach from=$artist item=arti}           
                <OPTION VALUE="{$arti.id}">{$arti.artist_fname}</OPTION>
            {/foreach}


<SELECT NAME="sel_art" id="get_collections"></SELECT>
            </SELECT>
said on February 16th, 2009 at 23:17 · Permalink

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)

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.