tags:

views:

226

answers:

2

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!

A: 

Are you sure, that your 2nd select has the id 'InvoiceClientBankId'?

Also, in case you use firefox with firebug: do you get a result in the network tab?

harpax
Yes, id of 2nd select box is : InvoiceClientBankIdAlso, I'm sending like request: http://localhost/myapp/invoices/listTitleByCategory/1For me, it looks like I do not call method listTitleByCategory... Maybe is there a problem?
I checked a bit more, and controller method returns good values.Problem is that variable data returns noting (or some kind of error?), or I don't know how to use value it returns....Please help :-((((
hmm .. everything looks ok. What happens if you call the action in a non-ajax way (by calling localhost/myapp/invoices/listTitleByCategory/1)? Is there an online demo?
harpax
A: 

The problem with your code is you're trying to invoke jQuery calls before the DOM is full loaded. You need to put your handlers in a jQuery.ready() callback:

<?php
    $javascript->codeBlock('
        $(document).ready(function(){
            $("#InvoiceClientId").change(function () {
                // stuff
            });
        });
    ', array('inline'=>false'));
?>

(I also took the liberty of using Cake's Javascript helper to output your JS in the <head>.)

Daniel Wright