CakePHP设置依赖的AJAX下拉列表

时间:2013-11-12 09:46:10

标签: ajax jquery cakephp cakephp-2.0

我做了很多研究,试图应用一些不同的例子,但似乎没有什么真正有效。

所以我有以下3个模型:客户,项目和活动。客户有很多项目,项目有很多活动。

在创建活动时,我希望用户从下拉列表中选择一个客户,然后应向用户提供属于所选客户的项目列表。我最接近的是以下内容。我没有使用AJAX的经验,所以这真的是一个难以制造的难题。

Porject控制器中的动作:

    public function getbycustomer(){

    $customer_id = $this->request->data['Event']['customer_id'];

    $projects = $this->Project->find('list', array('conditions'=>array('Project.customer_id' => $customer_id), 'recursive' => -1));

    $this->set('projects', $projects);
    $this->layout = 'ajax'; 
}

此操作的视图如下:

    <?php foreach ($projects as $key => $value): ?>
<option value="<?php echo $key; ?>"><?php echo $value; ?></option>
<?php endforeach; ?>

以下是添加活动视图的片段:

    echo $this->Form->input('customer_id');
        echo $this->Form->input('project_id'); 

//form continues and at the end of a page there is the AJAX call

    $this->Js->get('#EventCustomerId')->event('change', 
    $this->Js->request(array(
        'controller'=>'projects',
        'action'=>'getbycustomer'
        ), array(
        'update'=>'#EventProjectId',
        'async' => true,
        'method' => 'post',
        'dataExpression'=>true,
        'data'=> $this->Js->serializeForm(array(
            'isForm' => true,
            'inline' => true
            ))
        ))
    );

我非常感谢任何帮助,因为我甚至不知道调试它的正确方法,所以我可以提供更有价值的信息。

2 个答案:

答案 0 :(得分:3)

转到this。这有助于我做依赖下拉列表。它逐步提供详细信息。

答案 1 :(得分:0)

我认为您需要将autoRender设置为false,否则它将尝试在app / View / Project / getbycustomer.ctp中呈现模板。此外,您可能想要返回或打印JSON。可能有几种方法可以做到这一点,但我有类似的工作,控制器动作基本上是这样的:

public function getbycustomer() {
  $this->autoRender = $this->layout = false;
  $customer_id = $this->request->data['Event']['customer_id'];
  $projects = $this->Project->find('list', array('conditions'=>array('Project.customer_id' => $customer_id), 'recursive' => -1));
  $this->set('projects', $projects);
  echo json_encode(array('html' => $this->render('your_partial_template')->body())); // This template would be in app/View/Project/json/
}

然后在你的Ajax调用中应该有一个'success'回调来处理返回的JSON:

success: function(data) {
  $('#EventProjectId').html(data.html); // assuming this an empty container
}

此外,除非您的项目表只有两列,否则您的查找结果可能不是您所期望的。将其更改为

$projects = $this->Project->find('list', array('conditions'=>array('Project.customer_id' => $customer_id), 'fields' => array('id', 'name_or_whatever', 'recursive' => -1));

然后在您的部分模板中,您可以使用表单助手:

<?php echo $this->Form->input('Projects.id', array('options' => $projects)); ?>