Question

尝试使用下一个示例集成CakePHP和jQuery

http://bakery.cakephp.org/articles/view/dynamic-select-boxes-with-ajax-jquery

我想要的是当用户更改第一个选项元素时，自动填充具有适当值的第二个选择选项框。但是，没有任何反应，如果你可以帮助我的原因。

所以，有一个发票添加表单（add.ctp），下一个代码......

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

此外，还有控制器（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>";
   }
  }


?>

如果你能帮我解决这个问题，请。提前谢谢！

Answer 1

您确定第二个选择的ID是'InvoiceClientBankId'吗？

另外，如果你使用firefox和firebug：你会在网络标签中得到一个结果吗？

Answer 2

您的代码的问题是您在DOM完全加载之前尝试调用jQuery调用。您需要将处理程序置于jQuery.ready()回调中：

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

（我也冒昧地使用Cake的Javascript帮助器在<head>输出你的JS。）

试图集成CakePHP和jQuery

2 个答案: