php中dialog使用,使用 CJuiDialog 创建新的模型

简介

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

这里有一个类似的教程，使用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 编码的数组。

对话框

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

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

array(

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

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

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

'id'=>'dialogClassroom',

'options'=>array(

'title'=>'Create classroom',

'autoOpen'=>false,

'modal'=>true,

'width'=>550,

'height'=>470,

),

));?>

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

// here is the magic

function addClassroom()

{

'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;

}

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

打开对话框的链接

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

javascript 函数 addClassroom().

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

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

摘要

简单来说:

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

改变 create 动作来响应 ajax 请求

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

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