Difference between #8 and #4 of CJuiDialog and AjaxSubmitButton

CJuiDialog and AjaxSubmitButton
Hello ppl. Even though i have a small experience with yii I though of writing
this to help people which want to do something similar.


We have a model Person how represent persons. The person has a Job. The user
must select a job from a dropdownlist when he creates the person. 
What if the person's job is not listed in the dropdownlist and we don't want to
redirect user to the job/create page. Here comes the CJuiDialog. We will create
a CJuiDialog ( a modal one ;) and we will create a new job and the new job
inserted will be also appended to the existing dropdowlist.

##What we will use

###1. AjaxLink:
We will use an ajaxLink which will be located to the person/views/_form.php ( we
will call it _form from now on ) where we create the person. The role of this
ajaxLink will be to open the CJuiDialog.
###2. JobController ActionAddnew:
The ajaxLink will call an action in the JobController with name ActionAddnew (
we will call it Addnew from now on ), which will either save the job ( after
validation ) either rendering the job form.
###3. _FormDialog:
Finally, the job form which consist of a create.php view and a _formDialog.php
view, both exist under under job/views/.
The _formDialog.php ( we will call it _formDialog from now on ) will contain an
ajaxSubmitButton to submit the Job we want to create.
##Code and details
Now, I don't know from where exactly should i start to make it more easy for
you.I assume you have a little experience with ajaxLink etc although i will try
to be as much detailsdetailed as i can.

###Starting with### _form. The person's create form.
<div class="row">
<?php echo $form->labelEx($person,'jid'); ?>
<div id="job">
	<?php echo
	<?php echo CHtml::ajaxLink(Yii::t('job','Create
		'onclick'=>'$("#jobDialog").dialog("open"); return
	<div id="jobDialog"></div>
#####Where to pay attention:

    `$attribute` set to  `'jid'`

2. [`ajaxLink`](http://www.yiiframework.com/doc/api/CHtml#ajaxLink-detail) 

    `$url` calls the `ActionAddnew` in `JobController.php`

    `$ajaxOptions` has to do with `#jobDialog` the `div` after the `ajaxLink`
which will contain the `CJuiDialog` after the `'update'` 

    and finally last but not least the `$htmlOption` where I set an `id` to the
`ajaxLink` for avoiding some issues.

### JobController. The ActioAddnew.
        public function actionAddnew() {
                $model=new Job;
		// Ajax Validation enabled
		// Flag to know if we will render the form or try to add 
		// new jon.
		{       $flag=false;

			if($model->save()) {
			    //Return an <option> and select it
                            echo CHtml::tag('option',array (
                if($flag) {
####Where to pay attention:
I think this is straightforward. Pay attention the last 2 parameters of
We call first the `createDialog.php` from `job/views/` which is the following.

### createDialog.php
                    'title'=>Yii::t('job','Create Job'),
echo $this->renderPartial('_formDialog', array('model'=>$model)); ?>
<?php $this->endWidget('zii.widgets.jui.CJuiDialog');?>
####Where to pay attention: 
The `'id'=>'jobDialog',` and step back to the `_form` "pay
attention." :)
Here we initialize the `CJuiDialog widget` and we render the `_formDialog.php`

<div class="form" id="jobDialogForm">

<?php $form=$this->beginWidget('CActiveForm', array(
//I have enableAjaxValidation set to true so i can validate on the fly the

	<p class="note">Fields with <span
class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">
		<?php echo
            <div id="job">
		<?php echo
		<?php echo CHtml::ajaxLink(Yii::t('job','Create
                <div id="jobDialog"></div>
            </div>$form->error($model,'jid'); ?>
	<div class="row">
		<?php echo $form->labelEx($model,'jdescr'); ?>
		<?php echo
		<?php echo $form->error($model,'jdescr'); ?>

	<div class="row buttons">
		<?php echo CHtml::ajaxSubmitButton(Yii::t('job','Create
function(data) {
                    }'),array('id'=>'closeJobDialog')); ?>

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

####Where to pay attention:
1. In the `'success'` `js function` the `data` is the what the `ActioAddnew`

`$("#Person_jid").append(data);` This append the `data` to the `'jid'`
`dropDownList` ( check `_form` ).

2. `$("#jobDialog").dialog("close");` We close the dialog.

3. `array('id'=>'closeJobDialog')` We give unique id for this `ajaxLink` to
avoid issues as we said before.

Write new article
  • Written by: tydeas_dr
  • Updated by: phazei
  • Category: Tutorials
  • Yii Version: 1.1
  • Votes: +37 / -2
  • Viewed: 91,390 times
  • Created on: May 11, 2010
  • Last updated: Jul 28, 2011
  • Tags: AJAX