Difference between #3 and #4 of
CJuiDialog to create new model

Revision #4 has been created by mrwallace on Mar 2, 2011, 1:38:19 PM with the memo:

Initial spell/grammar check and removal of duplicity by changing the Class model to Classroom.
« previous (#3) next (#5) »


Title unchanged

CJuiDialog for create new model

Category unchanged


Yii version unchanged

Tags unchanged

juidialog, user interface, AJAX

Content changed

Introduction ------------------ In this tutorial we will learn how to realize a create interface using a dialog. [Here](http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton "other tutorial") there is a similar tutorial that uses aAjax link forto achieve the goal, but here we will use a simplier and more effective approach: the event onSubmit of the form. Scenario ------------------ Let's immagine that we have a classroom with many students. If the user fills in the form of the stundent and there is not the class, he hasroom made, he will have to create a classroom first, so loosing the input and lose the already inserted input. We want to allow the user to insertcreate the class inroom from the form of the students, without changing pages. Preparation of the form ------------------ First of all we need a form for instertcreating the classroom. We can generate a Crud for classroom with gii and adapt the code to our needs. Once we are satisfacted ofied with our form thaand it works with the usual submit, we can use it in a dialog. Enhance the action create ------------------ We need now to enhance the action create of the classroom controller. Let's change int this way:
public function actionCreate()
$model=new Class
sroom; // Uncomment the following line if AJAX validation is needed // $this->performAjaxValidation($model); if(isset($_POST['Classsroom'])) { $model->attributes=$_POST['Classsroom'];
echo CJSON::encode(array(
room successfully added"

Now the back
-end is done, let's write the dialog itself. In the form of the student somewhere we add this code:
<?php echo CHtml::link('Create class
room', "", // 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',
<script type="text/javascript">
// here is the magic
function addClass
room() { <?php echo CHtml::ajax(array( 'url'=>array('classsroom/create'),
'data'=> "js:$(this).serialize()",
if (data.status == 'failure')
room 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);
- A link for open the dialog
- the dialog itself, with a div inside that will be replaced with ajax
- the javascript function addClass

This function fires an ajax request to the action create we prepared in the previous step.
The returned form will be placed in the dialog (with eventually, all errors and so on) in case of status failure, in case of status success in the example we replace the div and we close the dialog after 3 seconds.

If you use this system in the form for student, you can return, for example, the id of the newly inserted class
room and select it authomatically in a ddlrop down list.

- Prepare the usual creation with gii generated code
- Change the action create for answer to
aAjax requests - Place the link/dialog/js wherever you want. This methodology is very conmfortable because it changes anything in the code of the _form, so any evenutually added field in classroom will be available in both standard and dialog insert.
55 0
Viewed: 100 476 times
Version: 1.1
Category: Tutorials
Written by: zaccaria
Last updated by: Maurizio Domba Cerin
Created on: Feb 17, 2011
Last updated: a year ago
Update Article


View all history