cakephp实现模态窗口进行编辑

时间:2014-01-17 17:38:55

标签: jquery twitter-bootstrap cakephp

我有一个显示记录列表的简单应用程序,我想实现一个用于编辑记录的引导模式窗口。我是php的新手,但我正在尝试使用cakePHP,因为我更喜欢MVC。

我在每个表行上都有一个下拉列表,在选择之后,我想打开模态,进行更改并保存。目前,我正在实现一个链接来调用url以获取数据异步并使用响应更新div。我有这个工作,但数据正在缓存,所以它显示即使在选择新记录后显示的第一个记录中的数据。我确信我能找到一种方法来清除它,但它让我怀疑我是如何实现模态窗口的。

列表视图包含以下内容:

<li>
          <?php              
          echo $this->Js->link("Edit settings","/units/edit/".$unit['Unit']['id'] ,
                  array('update' => '#editModal',
                      'htmlAttributes' => array(
                          'data-toggle' => 'modal',
                          'data-target' => '#editModal'
                      )));
          ?>
        </li>

控制器:

if (!$this->Unit->exists($id)) {
  throw new NotFoundException(__('Invalid unit'));
}
if ($this->request->is(array('post', 'put'))) {
  if ($this->Unit->save($this->request->data)) {
    $this->Session->setFlash(__('The unit has been saved.'));
    return $this->redirect(array('action' => 'index'));
  } else {
    $this->Session->setFlash(__('The unit could not be saved. Please, try again.'));
  }
} else {
if ($this->request->is('ajax')) {
    $this->render('edit', 'ajax');
  }
}

编辑视图:

<div class="modal-dialog">

           ×       模态标题          

<?php

  echo $this->Form->create('Unit');
  echo $this->Form->input('name', array('class' => 'form-control', 'div' => 'form-group', 'disabled' => 'disabled'));
  echo $this->Form->input('internet_class_id', array('class' => 'form-control', 'div' => 'form-group'));
  $offOn = array(0 => 'Off', 1 => 'On');
  echo $this->Form->input('water_setting_id', array('options' => $offOn, 'default' => 0,
      'class' => 'form-control', 'div' => 'form-group'));
  $amenitySettings = array(0 => 'Deny', 1 => 'Allow');
  echo $this->Form->input('amenity_setting_id', array('options' => $amenitySettings, 'default' => 0,
      'class' => 'form-control', 'div' => 'form-group'));
  echo $this->Form->input('cable_setting_id', array('options' => $offOn, 'default' => 0,
      'class' => 'form-control', 'div' => 'form-group'));
  echo $this->Form->hidden('id');
  echo $this->Form->hidden('building_id');
  echo $this->Form->button('Save', array('type' => 'submit', 'class' => 'btn btn-primary'));
  echo $this->Form->end();
  ?>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>

这可能是错误的实施方式,所以我愿意接受建议。任何帮助表示赞赏。

谢谢

2 个答案:

答案 0 :(得分:2)

这就是我最终做的事情。此解决方案与stackoverflow上的其他答案拼凑在一起:

在控制器中,我添加了对ajax请求的简单检查,如果是,则使用空的ajax布局呈现视图:

if ($this->request->is('ajax')) {
    $this->render('edit', 'ajax');
  }

然后我将此jquery添加到视图中:

$("a[data-target=#flexModal]").click(function(ev) {
ev.preventDefault();
var target = $(this).attr("href");
// load the url and show modal on success
$("#flexModal .modal-body").load(target, function() {
  $("#flexModal").modal("show");
});
});

使用此功能,每次单击我正在使用的模型的管理按钮时,都会进行ajax调用,并将结果添加到模态的主体中。

希望这有助于某人。

答案 1 :(得分:0)

将以下代码添加到UnitsController beforeFilter回调方法:

public function beforeFilter() {
            parent::beforeFilter();
            if ($this->request->is('ajax')) {
                    $this->response->disableCache();
            }
}

这将检查请求是使用CakeRequest对象的is()方法通过Ajax进行的,并传递ajax值。如果是这种情况,我们将禁用缓存,因为我们总是希望为新的Ajax调用提供服务。这应该解决您所处的问题&#34;数据被缓存,因此即使在选择新记录后它也会显示第一条记录中的数据。&#34;