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