简介

在本教程中，我们将学习如何使用一个对话框，实现了创建接口。

这里有一个类似的教程，使用Ajax的方式实现，但我们将使用一个更简单和更有效的的方法：表单的 onSubmit 方式

方案

假设我们有一个有很多学生的教室。如果用户在表单里填写了学生的信息但是没有这个学生的教室，他应该去创建这个教室，但是他就会丢失刚才的输入。

我们想允许用户在学生表单页面创建教室而不改变页面。

准备表单

 

首先我们需要一个创建教室的表单。我们可以使用 gii 生成我们需要的 CRUD 代码。

一旦我们对我们的表单感到满意并且它可以在提交表单时工作，我们可以在对话框中使用他。

增强 create 动作

 

我们需要增强教室 Controller 的创建(create)动作。

让我们使用以下的方式：

public function actionCreate()

    {

        $model=new Classroom;

 

        // Uncomment the following line if AJAX validation is needed

        // $this->performAjaxValidation($model);

 

        if(isset($_POST['Classroom']))

        {

            $model->attributes=$_POST['Classroom'];

            if($model->save())

            {

                if (Yii::app()->request->isAjaxRequest)

                {

                    echo CJSON::encode(array(

                        'status'=>'success', 

                        'div'=>"Classroom successfully added"

                        ));

                    exit;               

                }

                else

                    $this->redirect(array('view','id'=>$model->id));

            }

        }

 

        if (Yii::app()->request->isAjaxRequest)

        {

            echo CJSON::encode(array(

                'status'=>'failure', 

                'div'=>$this->renderPartial('_form', array('model'=>$model), true)));

            exit;               

        }

        else

            $this->render('create',array('model'=>$model,));

    }

 

我们增加了一些小改动：在 ajax 的请求下我们写了一个 json 编码的数组。

 

对话框

 

现在后台完成了，我们写对话框

在学生表单的某处我们添加以下代码：

<?php echo CHtml::link('Create classroom', "",  // the link for open the dialog

    array(

        'style'=>'cursor: pointer; text-decoration: underline;',

        'onclick'=>"{addClassroom(); $('#dialogClassroom').dialog('open');}"));?>

 

<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

    'id'=>'dialogClassroom',

    'options'=>array(

        'title'=>'Create classroom',

        'autoOpen'=>false,

        'modal'=>true,

        'width'=>550,

        'height'=>470,

    ),

));?>

<div class="divForForm"></div>

 

<?php $this->endWidget();?>

 

<script type="text/javascript">

// here is the magic

function addClassroom()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('classroom/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogClassroom div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogClassroom div.divForForm form').submit(addClassroom);

                }

                else

                {

                    $('#dialogClassroom div.divForForm').html(data.div);

                    setTimeout(\"$('#dialogClassroom').dialog('close') \",3000);

                }

 

            } ",

            ))?>;

    return false; 

 

}

 

</script>

这就是全部。在代码中我们有:

• 打开对话框的链接

• 对话框中 div 的内容会被 ajax 的内容替换

• javascript 函数 addClassroom().

这个函数触发 ajax 访问我们上一步准备的 create 动作

在例子中返回的结果不管是失败还是成功都将会替换表单内容，我们打开的对话框在返回结果的3秒后关闭

摘要

 

简单来说:

• 使用 gii 生成创建记录的代码

• 改变 create 动作来响应 ajax 请求

• 将 链接/对话框/javasript 放到指定的位置

这种方法很好的原因是它在 _form 中做了所有事情，所以任何最终添加到教室中的字段都将对对话框插入可用。