AJAX-enabled Smarty plugins

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:

<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:

<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:

 {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

Simplest way is to process form on the server and parse result on client, where return data can be in following format:

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):

 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:

 <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:

 // 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:

 {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

This article originally appeared on : kpumuk.info