Cakephp 在索引 View 中的模式窗口内添加表单

Question

这里是 cakephp 的新手..想知道如何在我的索引 View 中拥有一个按钮来打开添加表单(对于同一模型)。一旦我提交此表单，我希望模式消失并在索引 View 中显示新记录。我正在考虑将添加表单放入蛋糕元素中？但不知道如何将其放入模式窗口中。任何建议都会非常感谢。

Answer 1

@savedario 所说的非常有道理。我blogged圣诞节前夕对此进行了讨论，并复制了以下相关内容:

查看/Users/index.php:

<!-- overlayed element -->
   <div id="dialogModal">
     <!-- the external content is loaded inside this tag -->
     <div class="contentWrap"></div>
   </div>
...
<div class="actions">
    <ul>
        <li>
            <?php echo $this->Html->link(__('Add user', true), array("controller"=>"users", "action"=>"add"), array("class"=>"overlay", "title"=>"Add User"));
        </li>
    </ul>
</div>
...
<script>
$(document).ready(function() {
    //prepare the dialog
    $( "#dialogModal" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 500
            },
        hide: {
            effect: "blind",
            duration: 500
            },
        modal: true
        });
    //respond to click event on anything with 'overlay' class
    $(".overlay").click(function(event){
        event.preventDefault();
        $('#contentWrap').load($(this).attr("href"));  //load content from href of link
        $('#dialogModal').dialog('option', 'title', $(this).attr("title"));  //make dialog title that of link
        $('#dialogModal').dialog('open');  //open the dialog
        });
    });
</script>

View /用户/add.ctp:

echo $this->Form->create('User');
echo $this->Form->input('name');
echo $this->Js->submit('Save', array(  //create 'ajax' save button
    'update' => '#contentWrap'  //id of DOM element to update with selector
    ));
if (false != $saved){ //will only be true if saved OK in controller from ajax save above
    echo "<script>
        $('#dialogModal').dialog('close');  //close containing dialog         
        location.reload();  //if you want to reload parent page to show updated user
    </script>";
    }
echo $this->Form->end();
echo $this->Js->writeBuffer(); //assuming this view is rendered without the default layout, make sure you write out the JS buffer at the bottom of the page

Controller /UsersController.php:

function add() {
    ...
    $this->set('saved', false); //false by default - controls closure of overlay in which this is opened
    if (!empty($this->request->data)) {
        $this->User->create();
        if ($this->User->save($this->request->data)){ 
            $this->set('saved', true); //only set true if data saves OK
            } 
        }
    ...
    }

您需要在 index.ctp 和 add.ctp 使用的布局中包含 JQuery 1.9+ 和 JQuery UI js 文件。

实际上，我现在已经在自己的代码中切换到 Bootstrap 模式，因为我认为它们看起来更好，但方法非常相似。