CakePHP: lists, beautiful bits
August 18th, 2008
These tiny bits of beauty really make the development enjoyable:
as the result, getting:
I’ll miss these features if I move from this framework 
Archive
Posts Tagged ‘frameworks’
CakePHP: Dynamic select boxes with AJAX
August 7th, 2008
Working with CakePHP1.2 I had to implement some AJAX techniques in the framework, mainly dealing with onChange behavior of the form components, here is a small example of how we can use multiple selectboxes.
Note: For simplicity reasons, I didn’t include queries, and just used option-arrays:
//inside controller
<?php
class FooController extends AppController{
var $name = ‘Fooes’;
var $components = array(‘RequestHandler’);
var $helpers = array(‘Html’,‘Form’,‘Javascript’,‘Ajax’);
<?php
class FooController extends AppController{
var $name = ‘Fooes’;
var $components = array(‘RequestHandler’);
var $helpers = array(‘Html’,‘Form’,‘Javascript’,‘Ajax’);
function beforeRender(){
if($this->RequestHandler->isAjax()){
Configure::write(‘debug’,0);
//prevent useless warnings for Ajax
}
$this->set(‘foobar’,null);
// initiate an array of options (otherwise, you’ll get a warning)
}
function updateDistricts(){
$this->layout = ‘ajax’;
$this->beforeRender();
$this->render(‘updateDistricts/’,‘ajax’);
}
}
?>
This is just a simple layout for calling AJAX methods, without database, sofisticated layout handling, routes etc (for these reasons we got CakePHP API, and CakePHP GoogleGroup)
The actual form would look like:
//this code was used as an element from /view/elements/*.ctp
<ul id="navlinks">
<li><?php echo $form->create(‘foo’);?></li>
<li>
<?php
print $form->input(‘Districts.name’,
array(‘type’=>’select’,
‘options’=>array(‘Limassol’,‘Nicosia’,‘Larnaka’),
‘id’=>‘district_name’,
‘empty’=>‘Choose District’,
‘label’=>‘District’));
print ‘<span class="ajax_update" id="ajax_indicator" tyle="display:none;">’.$html->image(‘ajax-loader.gif’).‘</span>’;
?>
</li>
<li>
<?php
print $form->input(‘Towns.name’,
array(‘type’=>’select’,
‘options’=> $foobar,
’style’=>‘display:none’,
’showEmpty’=>true,
‘empty’=>‘City’,
‘id’=>‘city_name’));
print $ajax->observeField(‘district_name’,
array( ‘url’=>‘updateTowns/’,
‘update’=>‘city_name’,
‘loading’=>"Element.show(’city_name’);
Element.show(’ajax_indicator’)",
‘complete’=>"Element.hide(’ajax_indicator’);
Effect.Appear(’city_name’)",
‘onChange’=>true));
?>
</li>
<li><?php echo $form->end(‘Search’);?></li>
</ul>
As the result, once you change the default value of the first select box, the second one automatically calls the controller’s method, which renders the values (gets the option list from the view file) and renders it in AJAX manner
.