Skip to content

TinyAjax

Jump to bottom Edit New page
World Wide Web Server edited this page Jul 4, 2012 · 29 revisions

Category:Library::AJAX

[url=http://www.metz.se/tinyajax]TinyAjax[/url] 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 [code]<?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');

?>[/code]

[h3]Example of use[/h3] A simple multiplication example. Here is the Controller. [code]<?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');
}

} ?>[/code]

And here is the ajax_multiply.php views file: [code]<html> <head> <? $this->tinyajax->drawJavaScript(false,true); ?> </head> <body> Multiply:
<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>[/code]

[h3]Example with Behavior[/h3] Add this code to the controller: [code]
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');
}

[/code]

And the views file ajax_multiplyb.php look like this: [code]<html> <head> <? $this->tinyajax->drawJavaScript(false,true); ?> </head> <body> Multiply:
<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()">

 
</body> </html>[/code]

[h3]Addendum By [url=http://www.syscool.com]syscool[/url] [/h3] 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 [code] $this->setScriptPath('../../js'); $this->setRequestType('post'); [/code]

2 - replace the first lines used to detect the TINYAJAX_PATH constant by : [code] define('TINYAJAX_PATH', BASEPATH . 'application/libraries/'); [/code] so the begining of this files will look like : [code] /* ... comments ... */ define('TINYAJAX_VERSION', '0.9.5'); define('TINYAJAX_PATH', BASEPATH . 'application/libraries/'); require_once (TINYAJAX_PATH . '/TinyAjaxBehavior.php'); ..... [/code]

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 [code]function multiply() {[/code] by [code]function index() {[/code]

After that, the multiply exemple works fine for me on CI, I Hope it will help

[h3]Addendum By [url=http://www.100procent.info]100procent[/url] [/h3]

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:

[code] 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++;

} [/code]

*Just replace function loading_show with code above.

More related [url="http://uk.bestessays.com/"]essay[/url] topics and tutorials on Ajax in [url="http://www.tizag.com/ajaxTutorial/"]AjaxTutorial[/url]

Add a custom footer
Add a custom sidebar
Clone this wiki locally