I followed this tutorial and everything works fine except for one glitch: the CJuiDialog opens, and I see three GETs in the Firebug console. Then, if I click anywhere within the white space of the dialog, a POST is executed. Then, I enter all the details in the dialog and click "save" and one more post is executed and the form closes. So, the problem is the two posts, which can generate a double save and create a MySQL error. Why, when I click anywhere within the white space of the dialog does a POST get executed?
Here is what I have:
the "createDialog.php" file
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'personChildDialog',
'options'=>array(
'title'=>Yii::t('personChild','Add Child'),
'autoOpen'=>true,
'modal'=>'true',
'width'=>'auto',
'height'=>'auto',
'click'=> "js:function(e,ui) {alert('coucou');}",
'close' => "js:function(e,ui) {
jQuery('body').undelegate('#personChildDialog', 'click');
jQuery('#personChildDialog').empty();
}",
),
));
echo $this->renderPartial('_formDialog', array('model'=>$model));
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
the "_formDialog" code:
<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,'Name'); ?>
<?php echo $form->textField($model,'Name',array('size'=>60,'maxlength'=>180)); ?>
<?php echo $form->error($model,'Name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'personID'); ?>
<?php echo $form->textField($model,'personID',array('value'=>$_GET['person_id'],'size'=>60,'maxlength'=>180)); ?>
<?php echo $form->error($model,'personID'); ?>
<?php //echo $form->hiddenField($model,'personID',array('value'=>'123')); ?>
</div>
<!--
<input type="hidden" name="PersonChildren[personID]" id="PersonChildren_personID" value="1">
-->
<div class="row buttons">
<?php
echo CHtml::ajaxSubmitButton(
Yii::t('job','Save'),
CHtml::normalizeUrl(array('person/addnew','render'=>false)),
array('success'=>'js: function(data) {
$("#Person_id").append(data);
$("#personChildDialog").dialog("close");
}'),
array('id'=>'closePersonChildDialog')
);
?>
</div>
<?php $this->endWidget(); ?>
</div>
the "_form.php" code in the view
<?php
/* @var $this PersonController */
/* @var $model Person */
/* @var $form TbActiveForm */
?>
<div class="form">
<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'person-form',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>false,
)); ?>
<p class="help-block">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<?php echo $form->textFieldControlGroup($model,'Name',array('span'=>5,'maxlength'=>32)); ?>
<?php echo $form->textFieldControlGroup($model,'FamilyName',array('span'=>5,'maxlength'=>32)); ?>
<?php echo $form->textFieldControlGroup($model,'Cell',array('span'=>5,'maxlength'=>18)); ?>
<?php
if (!($model->isNewRecord)) {
echo CHtml::ajaxLink(
Yii::t('job','Add Child'),
$this->createUrl('person/addnew&person_id='.$model->ID),
array(
//'onclick'=>'$("#personChildDialog").dialog("open"); return false;',
'update'=>'#personChildDialog'
),
array('id'=>'showPersonChildDialog')
);
}
?>
<div id="personChildDialog"></div>
<div class="form-actions">
<?php echo TbHtml::submitButton($model->isNewRecord ? 'Create' : 'Save',array(
'color'=>TbHtml::BUTTON_COLOR_PRIMARY,
'size'=>TbHtml::BUTTON_SIZE_LARGE,
)); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
