Difference between #4 and #8 of
CJuiDialog and AjaxSubmitButton

Revision #8 has been created by tydeas_dr on May 26, 2010, 9:06:55 AM with the memo:

autoopen correction
« previous (#4) next (#9) »


Title unchanged

CJuiDialog and AjaxSubmitButton

Category unchanged


Yii version unchanged

Tags unchanged

Content changed

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 detail
sed as i 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;',
),array('id'=>'showJobDialog'));//UPDATE Div'?>
                <div id="jobDialog"></div>
<div id="jobDialog"></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.

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 [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

                    '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 $form->labelEx($model,'jid'); ?>
<?php echo $form->textField($model,'jid',array('size'=>60,'maxlength'=>90)); ?>
<?php echo $form->error($model,'jid'); ?>
<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 class="row buttons">
<?php echo CHtml::ajaxSubmitButton(Yii::t('job','Create Job'),CHtml::normalizeUrl(array('job/addnew','render'=>false)),array('success'=>'js: 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` 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.
33 1
Viewed: 105 836 times
Version: 1.1
Category: Tutorials
Tags: AJAX
Written by: tydeas_dr
Last updated by: phazei
Created on: May 11, 2010
Last updated: 6 years ago
Update Article


View all history