TinyAjax is a small php5 library that allows you to easily add AJAX-functionality to existing pages and create new AJAX-enabled pages with just a few lines of code.
* Put the include/TinyAjax.php and TinyAjaxBehavior.php into system/application/libraries/
* Put the include/TinyAjax.js into the “top-level directory”/js directory
* Put the following code into system/application/init/init_tinyajax.php
<?php if(!defined('BASEPATH')) exit('No direct script access aellowed');
if (!class_exists('TinyAjax'))
{
define('TINYAJAX_PATH', BASEPATH.'application/libraries/');
require_once(TINYAJAX_PATH.'TinyAjax'.EXT);
}
$obj =& get_instance();
$obj->tinyajax = new TinyAjax();
$obj->tinyajax->setScriptPath('../../js');
$obj->tinyajax->setRequestType('post');
?>
Example of use
A simple multiplication example. Here is the Controller.
<?php
class Ajax extends Controller {
function Ajax()
{
parent::Controller();
$this->load->library('tinyajax');
}
function ajax_multiply($x, $y)
{
return $x*$y;
}
function multiply()
{
$this->tinyajax->showLoading();
$this->tinyajax->exportFunction("ajax_multiply", array("first_id", "second_id"), "#third_id", $this);
$this->tinyajax->process();
$this->load->view('ajax_multiply');
}
}
?>
And here is the ajax_multiply.php views file:
<html>
<head>
<? $this->tinyajax->drawJavaScript(false,true); ?>
</head>
<body>
Multiply:<br>
<input type="text" id="first_id" value="2"> *
<input type="text" id="second_id" value="3"> =
<input type="text" id="third_id" value="">
<input type="button" value=" * " onclick="ajax_multiply()">
</body>
</html>
Example with Behavior
Add this code to the controller:
function ajax_multiplyb($x, $y)
{
$res = $x * $y;
$res_text = "Multiplying $x and $y results in $res";
$tab = new TinyAjaxBehavior();
$tab->add(TabSetValue::getBehavior("third_id", $res));
$tab->add(TabInnerHtml::getBehavior("result_div", $res_text));
return $tab->getString();
}
function multiplyb()
{
$this->tinyajax->showLoading();
$this->tinyajax->exportFunction("ajax_multiplyb", array("first_id", "second_id"), null, $this);
$this->tinyajax->process();
$this->load->view('ajax_multiplyb');
}
And the views file ajax_multiplyb.php look like this:
<html>
<head>
<? $this->tinyajax->drawJavaScript(false,true); ?>
</head>
<body>
Multiply:<br>
<input type="text" id="first_id" value="2"> *
<input type="text" id="second_id" value="3"> =
<input type="text" id="third_id" value="">
<input type="button" value=" * " onclick="ajax_multiplyb()">
<br/>
<div id="result_div"> </div>
</body>
</html>
Addendum By syscool
It seems that this code doesn’t work for me on CI 1.5.1
I think thats because the init folder is now deprecated
So , here is the solution I use :
no mater the /init/init_tinyajax .php file
instead , edit the TinyAjax.php file and
1 - add the following lines in the TinyAjax class constructor
$this->setScriptPath('../../js');
$this->setRequestType('post');
2 - replace the first lines used to detect the TINYAJAX_PATH constant by :
define('TINYAJAX_PATH', BASEPATH . 'application/libraries/');
so the begining of this files will look like :
/* ...
comments
...
*/
define('TINYAJAX_VERSION', '0.9.5');
define('TINYAJAX_PATH', BASEPATH . 'application/libraries/');
require_once (TINYAJAX_PATH . '/TinyAjaxBehavior.php');
.....
You also have to change the name of the default action in the controler because the “index” method is not present and so you will get an error
for that , edit the controler file and replace
function multiply() {
by
function index() {
After that, the multiply exemple works fine for me on CI, I Hope it will help
Addendum By 100procent
One small thing in TinyAjax.js
If the page is longer and you have a scroll the loading text is not vivible so you need to add property to make it always visble:
function loading_show()
{
if (document.documentElement && document.documentElement.scrollTop){
theTop = document.documentElement.scrollTop;
}else if (document.body){
theTop = document.body.scrollTop
}
var loading = document.getElementById('loading');
if (!loading)
{
loading = document.createElement('div');
loading.id = 'loading';
loading[removed] = '<font style="font-family:verdana; font-size:12px; color:white;">Loading...</' + 'font>';
loading.style.position = 'absolute';
loading.style.right = '4px';
loading.style.backgroundColor = 'red';
loading.style.width = '65px';
loading.style.padding = '2px';
document.getElementsByTagName('body').item(0).appendChild(loading);
}
loading.style.top = (theTop+4)+'px';
loading.style.display = 'block';
numLoading++;
}
*Just replace function loading_show with code above.