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.