Trying to integrate CakePHP and jQuery, using next example
http://bakery.cakephp.org/articles/view/dynamic-select-boxes-with-ajax-jquery
What I want is to when user change first option element, to automaticly fill second select option box with proper values. But, nothing happens, if you can help me why.
So, there is a Invoice add form (add.ctp), with next code...
<?php echo $form->create('Invoice');?>
<?php echo $javascript->link('jquery.js');
$category = array('1' => 'First', '4' => 'Fourth', '7' => 'Seventh');
echo $form->input('client_id', array('options' => $category, 'empty' => 'Choose:'));
echo $form->select('clientBank_id', array("Choose category first"), null, null, false);
?>
<script>
$("#InvoiceClientId").change(function () {
$.post('/invoices/listTitleByCategory/' + $(this).val(), function(data) {
$("#InvoiceClientBankId").empty().append(data);
}, 'html');
})
</script>
Also, there is controller (invoices_controller.php):
<?php
var $name = 'Invoices';
var $helpers = array('Html', 'Form', 'Time', 'Number', 'Javascript');
var $paginate = array('order' => array('Invoice.pinned DESC', 'Invoice.invoiceNumber'));
var $components = array('RequestHandler');
function beforeRender(){
// prevent useless warnings for Ajax
if($this->RequestHandler->isAjax()){
Configure::write('debug', 0);
}
}
// etc...
function listTitleByCategory($category = "") {
$this->layout = 'ajax';
$this->beforeRender();
$this->autoRender = false;
$data = $this->Invoice->Client->find('list');
echo "<option value=0>just for testing...</option>";
foreach($data as $key => $val) {
echo "<option value=$key>$val</option>";
}
}
?>
Please, if you can help me solving this. Thank you in advance!
