Difference between #11 and #10 of CJuiDialog and AjaxSubmitButton

unchanged
Title
CJuiDialog and AjaxSubmitButton
unchanged
Category
Tutorials
changed
Tags
AJAX
unchanged
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 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 detailed as i 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 ActioAddnew.
~~~~
[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) {
                   
$this->renderPartial('createDialog',array('model'=>$model,),false,true);
                }
        }
~~~~
####Where to pay attention:
I think this 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.