cakephp - 如何使用模式窗口和关闭时自动刷新 div 实现页面？

Question

我正在尝试实现一个页面，其中用户通过模式窗口添加儿童或/和成人，关闭此模式窗口后，添加的人出现在主页中。这就像配置一个项目，您可以在其中选择人员添加他们的信息，通过使用模式，然后在完成后您只需确认。但为此，我们希望显示已添加的人员。

Answer 1

我过度简化了这一点，因为你问的是如何做，而不是具体细节。所以请记住，这是一种指导方针，但您可以根据自己的需要进行调整和调整。

所以，这就是我要做的：

1. 拥有要在其中显示列表的视图。让我们称之为 view.ctp，在那里你将有一张桌子（或更花哨的东西），里面有添加的人

   示例代码 view.ctp

   <table>
   <?
       foreach ($people as $id => $person) {
           echo '<tr><td>'.$person['name'].' '.$person['lastname'].'</td></tr>';
       }
   ?>
   </table>
   

2. 添加模态窗口。让我们使用jquery ui（您需要搜索并查看您更喜欢哪个）。

   示例也在 view.ctp

   <div id="dialog-form" title="Add something">
   <?
       echo $this->Form->create().
            $this->Form->input('name').
            $this->Form->input('lastname').
       echo $this->Form->end();
   ?>
   </div>
   
   <script>
   $(function() {
        $( "#dialog-form" ).dialog({
             autoOpen: false,
             height: 300,
             width: 350,
             modal: true
         });
   });
   </script>
   

3. 通过ajax调用控制表单的提交

   示例也在 view.ctp

    //lets assume the form id is #form, ok?
    $('#form').submit(function() {
        /*validations and etc*/
        /* remember to prevent event propagation */
        var the_name = /* name taken out of the form */;
        var the_lastname = /* lastname taken out of the form */;
   
        $.ajax({
           type: "POST",
           url: "<?php echo $this->Html->url(/*array for url to the add action*/);?>",
           data: { name: the_name, lastname: the_lastname }
        }).success(function( data) {
             /* lets say the table has a #table id */
   
             //add the "new" record to the table
             $('#table').append('<tr><td>'+the_name+' '+the_lastname+'</td></tr>');
   
             /* add code here to close the modal if you want */
        });
        return false;
    });
   

   这里发生的是，在提交时，表单对实际将新人添加到 BD 的操作进行 ajax 调用。然后 ajax 调用接收结果（可能是 true 或 false，json 数组等）并将其添加到表中。

4. 创建被调用的添加操作

   中的示例... PeopleController.php 或您认为合适的内容

   public function add() {
       if ($this->request->is('ajax')) {
           $this->autoRender = false;
           //in $this->request->data should be the data passed by js
   
           if ($this->People->save($this->request->data))
               echo 'true :D';
           else
               echo 'false D:';
           return;
       }
   }
   

Aaaand...我认为这涵盖了所有内容。

这就是做你想做的事情的概括的、粗略的方式。您需要验证表单，决定如果添加不起作用该怎么办，如果它起作用了怎么办，创建添加操作等。还有其他方法可以做您想做的事情，例如在提交后重新加载视图页面表单，将表单作为另一个动作加载……嗯，这取决于你想怎么做。我希望我能帮助引导你走向某个方向。