Difference between #13 and #12 of CJuiDialog and AjaxSubmitButton

unchanged
Title
CJuiDialog and AjaxSubmitButton
unchanged
Category
Tutorials
unchanged
Tags
AJAX
changed
Content
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.

#Scenario

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 I should i start to
make it more easyeasier for you.Iyou. 
I assume you have a little experience with ajaxLink etc although
ietc., though I will try to be as much detailed as
iI can.

### _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'));?>
	<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:
IThe 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 thisthe 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.