CJuiDialog and AjaxSubmitButton

The 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.

it helps! thanks a lot

Hi, i having problems with the validation, I colud see errors on fields wher I lost focus on them, but when I click submit button, the form closes and no add data to the select.

so i change this line in my addnew action:

if($model->save()) {
                //Return an <option> and select it
                            echo CHtml::tag('option',array (
                                'value'=>$model->id,
                                'selected'=>true
                            ),CHtml::encode($model->apellido),true);
            } else {
                $flag=true;
            }
 
 
I added _else_ to let the function show again the form ...
 
Let me know if there is another way.
Best Regards

i got this working by using the below code.

the code for ajaxLink:Here i have used the success event instead of update and it worked.

echo CHtml::ajaxLink(Yii::t('job','ADD NEW LOCATION'),$this->createUrl('location/create'),array(
        'success'=>'js:function(data){
  $("#jobDialog").dialog("open");
  document.getElementById("update_div").innerHTML=data;   
}
',     
        ),array('id'=>'showJobDialog',
 
 
       ));

now the update div(ie the div we are going to upadate with the jquiry dialog which contains the form.). here i have placed the update div inside of jquiry dialog widget(Note:AutoOpen=false).

<?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',
                ),
                ));
 
?>
 <div id="update_div"></div>
 
<?php
 
 $this->endWidget('zii.widgets.jui.CJuiDialog');
?>

Note:please dont place this widget inside create.php .

Regards, sirin k http://www.sirink.tumblr.com

i tried this example but for me it loads the form without any dialog to the update div. One more thing i want to point out about the above exmpale is that there is no "onclick" event in the ajaxOptions of an ajaxLink and it can be placed inside "htmlOptions" ie the 4'th argument as an array but if we are placing an onclick event in "htmlOptions" in the above example it wont load the remote content to the update div.

Regards, sirin k http://www.sirink.tumblr.com

Why here 'render' => false?

CHtml::normalizeUrl(array('job/addnew','render'=>false))

<?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')); ?>

What is this code doing? I couldn't understand it. Please help! Thank you!

$("#Person_jid").append(data);
                        $("#jobDialog").dialog("close");

Hello all, I was following the tutorial, everything was ok but the code didn't work.

I noticed that have to add the actionAddNew to the accessRules in the JobController.

If one has the same problem here is the solution, just add the acction to the access Rules.

Regards, Diego

public function accessRules()
    {
        return array(
            array('allow',  // allow all users to perform 'index' and 'view' actions
                'actions'=>array('index','view','addnew'),
                'users'=>array('*'),
            ),

First of all, great tutorial, really useful.

I'm a bit unclear on the "onclick" part. It's in the ajaxOptions array, but it's not an ajax option nor is it one of the extras Yii added for convenience like the "update". Perhaps at the time this tutorial was written either Yii or jQuery has a slightly different API. It could be moved to the next array, and act as the onclick for the ajaxLink, but then it tries to open a blank modal and returns so never completes the ajax request the first time.

Whenever the ajaxLink is clicked it reloads the request which also causes the script to download jquery.js, jquery-ui.min.js, and the css file all over again which is a lot for every click. Seems the "onclick" would be best placed in the htmlOptions something like:

'onclick'=>'if (jobAjaxComplete) { $("#jobDialog").dialog("open"); return false; } else { jobAjaxComplete = true; }',

Where jobAjaxComplete is global. So after the first request it simply opens the already created modal rather than getting it again.

what is the class of $form here? <?php echo $form->labelEx($person,'jid'); ?>

/*This will fix multiple ajax submittion problem */

$this->beginWidget('zii.widgets.jui.CJuiDialog',array( 'id'=>"dmaDialog", 'options'=>array( 'closeOnEscape'=>true, 'title'=>Yii::t("dma",'CREATE DMA'), 'autoOpen'=>true, 'modal'=>'true', 'width'=>'450px', 'height'=>'auto', 'resizable' =>false, 'close'=>"js:function(e,ui){

/* Use the below undelegate function to destroy JQuery event. Otherwise when you open dialog 1st time, It will do ajax submission 1 time, if you open 2end time, It will submit 2 times etc.. You could see the ajax submission in firebug */ jQuery('body').undelegate('#closeDmaDialog', 'click');

                    jQuery('#dmaDialog').empty();
                 }",
            ),
            ));

See also this tutorial, that uses the onSubmit event instead of ajaxSubmit button.