CJuiDialog and AjaxSubmitButton

Tutorials

AJAX

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 I should i start to make it more easyeasier for you.  I assume you have a little experience with ajaxLink etc al., though iI will try to be as much detailsed as iI can. ###Starting with _form. The person's create form. ~ ```php <div class="row"> .....
 
<?php echo $form->labelEx($person,'jid'); ?>             <div id="job"> <?php echo $form->dropDownList($person,'jid',CHtml::listData(Job::model()->findAll(),'jid','jdescr'),array('prompt'=>'Select')); ?>                  <?php echo CHtml::ajaxLink(Yii::t('job','Create Job'),$this->createUrl('job/addnew'),array(
 
'onclick'=>'$("#jobDialog").dialog("open"); return false;',
 
'update'=>'#jobDialog'
 
),array('id'=>'showJobDialog'));//UPDATE Div'?>
 
                <div id="jobDialog"></div>
 
            </div>
 
</div>
 
```?>
 
<div id="jobDialog"></div>
 
</div>
 
.....
 
</div>
 
```~
 
#####Where to pay attention:
 
1. [`dropDownList`](http://www.yiiframework.com/doc/api/CHtml#activeDropDownList-detail) 
 
 
    `$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 ActionAddnew.
 
~ 
```php 
public function actionAddnew() {
 
                $model=new Job;
 
// Ajax Validation enabled
 
$this->performAjaxValidation($model);
 
// Flag to know if we will render the form or try to add 
 
// new jon.
 
                $flag=true;
 
if(isset($_POST['Job']))
 
{       $flag=false;
 
$model->attributes=$_POST['Job'];
 
 
if($model->save()) {
 
    //Return an <option> and select it
 
                            echo CHtml::tag('option',array (
 
                                'value'=>$model->jid,
 
                                'selected'=>true
 
                            ),CHtml::encode($model->jdescr),true);
 
                        }
 
                }
 
                if($flag) {
 
                    Yii::app()->clientScript->scriptMap['jquery.js'] = false;
 
                    $this->renderPartial('createDialog',array('model'=>$model,),false,true);
 
                }
 
        }
 
```~
 
####Where to pay attention:
 
The scriptMap parameter is essential.  Without that line, jquery.js will be loaded again and can cause issues with javascript both already existing on the page, as well as duplicated event handlers for ajax calls run multiple times that contain their own javascript.  You may want to use scriptMap to prevent other js files from loading again using '*.js' as the array key.
 
 
I think the rest is straightforward. Pay attention the last 2 parameters of [renderPartial](http://www.yiiframework.com/doc/api/CController#renderPartial-detail)
 
We call first the `createDialog.php` from `job/views/` which is the following.
 
 
### createDialog.php
 
~ 
```php 
<?php 
 
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
 
                'id'=>'jobDialog',
 
                'options'=>array(
 
                    'title'=>Yii::t('job','Create Job'),
 
                    'autoOpen'=>true,
 
                    'modal'=>'true',
 
                    'width'=>'auto',
 
                    'height'=>'auto',
 
                ),
 
                ));
 
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`
 
 
###_formDialog
 
~ 
```php 
<div class="form" id="jobDialogForm">
 
 
<?php $form=$this->beginWidget('CActiveForm', array(
 
'id'=>'job-form',
 
'enableAjaxValidation'=>true,
 
)); 
 
//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 $form->labelEx($model,'jid'); ?>
 
<?php echo $form->textField($model,'jid',array('size'=>60,'maxlength'=>90)); ?>
 
<?php echo $form->error($model,'jid'); ?>
 
</div>
 
 
<div class="row">
 
<?php echo $form->labelEx($model,'jdescr'); ?>
 
<?php echo $form->textField($model,'jdescr',array('size'=>60,'maxlength'=>180)); ?>
 
<?php echo $form->error($model,'jdescr'); ?>
 
</div>
 
 
<div class="row buttons">
 
<?php echo CHtml::ajaxSubmitButton(Yii::t('job','Create Job'),CHtml::normalizeUrl(array('job/addnew','render'=>false)),array('success'=>'js: function(data) {
 
                        $("#Person_jid").append(data);
 
                        $("#jobDialog").dialog("close");
 
                    }'),array('id'=>'closeJobDialog')); ?>
 
</div>
 
 
<?php $this->endWidget(); ?>
 
 
</div>
 
```~
 
####Where to pay attention:
 
1. In the `'success'` `js function` the `data` is the what the `ActioAddnew` echoes.
 
 
`$("#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.