You are viewing revision #4 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.
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.
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 details as i can.
Starting with _form. The person's create form. ¶
<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>