Question

这里是cakephp的新手......想知道如何在我的索引视图中打开添加表单（对于同一型号）我可以有一个按钮。一旦我提交此表单，我希望模式消失，新记录将在索引视图中显示。我想把添加形式放在蛋糕元素中？但不知道如何把它放在模态窗口中。任何建议都会非常感谢。

Answer 1

@savedario所说的非常有意义。我在圣诞节前就此问题blogged并复制了以下相关内容：

查看/用户/ 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>

查看/用户/ 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

控制器/ 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模式，因为我认为它们看起来更好但是方法非常相似。

Answer 2

CakePHP没有内置功能来执行您想要的操作。在这里使用Elements并不一定有帮助，除非你发现自己在不同的地方编写相同的代码......

我找不到任何已经写过来处理这个的东西，所以我编写了自己的javascript函数，但是我怀疑它可以用作插件。解释整个事情在这里会有点太长。

我建议你先看看Jquery UI Dialog。您的索引视图需要在“添加”操作按钮上“打开”以打开对话框。对话框本身的内容可能来自您通常使用的相同add（）操作，通过ajax调用加载。

Answer 3

我使用bootstrap 3作为我的cakephp项目，其中包括模态，但这对你的项目来说可能有点过分。

Answer 4

您必须使用bootstrap或jquery来执行此操作。 CakePHP没有内置功能来执行您想要的操作。

Answer 5

错字

<div class="contentWrap"></div>

必须是

<div id="contentWrap"></div>

或

$('#contentWrap').load($(this).attr("href"));

必须是

$('.contentWrap').load($(this).attr("href"));

Cakephp在索引视图中在模态窗口内添加表单

5 个答案: