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) »

Changes

Title unchanged

CJuiDialog and AjaxSubmitButton

Category unchanged

Tutorials

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 detailsed 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;',
 
'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 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'=>false,
 
                    '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.
 
 
 
33 1
45 followers
Viewed: 126 335 times
Version: 1.1
Category: Tutorials
Tags: AJAX
Written by: tydeas_dr
Last updated by: phazei
Created on: May 11, 2010
Last updated: 12 years ago
Update Article
Revert to #4 | Revert to #8

Revisions

View all history