CJuiDialog with a form submission done by a dialog button

Hello,

I’m trying to open a CjuiDialog with a form inside. The user can of course edit this form and send it, but no through a form submit button. In fact, I’ve created a “validate” button just next to the cancel button of the dialog because it looks more consistent to me.

Therefore I put some jquery to make the submit.

The thing is the dialog opens, but what is edited is not reflected on the db, however, the row is updated (because i’m forcing a parameter in the controller). I’m also loosing control over the jquery thing and firebug doesn’t show me anything. I think it submits but loose the data or can’t use it. More over this


success: function () {$(\'#stcourse\').hide();}

doesn’t work neither.

I want the form to disappear when submitted.

To open the dialog from the host page i use this code:


CHtml::ajaxLink('<img src="'.Yii::app()->request->baseUrl.'/img/validate2.png" />',$this->createUrl('/student_courses/validateDialog?id='.$value['id']),array('onclick'=>'$("#dialogValidate").dialog("open");return false;','update'=>'#dialogValidate'),array('id'=>'vc'.$value['id']));

The called validateDialog is as follow

The view with the button validate




<?php 

$this->beginWidget('zii.widgets.jui.CJuiDialog',array(

                'id'=>'ShowdialogAssign',

                'options'=>array(

                    'title'=>Yii::t('student_courses','Validate this course'),

                    'autoOpen'=>true,

                    'modal'=>true,

                    'show'=>'puff',

                    'hide'=>'slide',

                    'width'=>'auto',

                    'height'=>'auto',

                    'buttons'=>array('Validate'=>'js: function() {

                    

                   

												$(\'form#student-courses-form\').submit(

													function(e) { 

													dataString = $("form#student-courses-form").serialize();

															

															$.ajax({

																type:"POST",

																url:"../student_courses/validateDialog/'.$model->id.'",

																data:dataString,

																success: function () {$(\'#stcourse\').hide();},

																

															});

															

															//$(this).dialog(\'close\');

													

														}

													);			                    

                  									

                  									

                  									}',

                    				'Cancel'=>'js: function() {$(this).dialog(\'close\');}',

                    				), //buttons

                ),//option

                               

                ));


?>

<h2>Course Completion Form</h2>

<p>By validating this course you are also going to validate the tasks associated with it.</p>

<div class="form" id="stcourse"> 


<?php  $form=$this->beginWidget('CActiveForm', array(

	'id'=>'student-courses-form',

	'enableAjaxValidation'=>false,

	

)); ?>




<p class="note">Fields with <span class="required">*</span> are required.</p>

<?php echo $form->errorSummary($model); ?>




<?php echo $form->hiddenField($model,'student_id'); ?>

<?php echo $form->hiddenField($model,'id',array('value'=>$id)); ?>


<div class="row">

		<?php echo $form->labelEx($model,'course_price'); ?>

		<?php echo $form->textField($model,'course_price'); ?>

		<?php echo $form->error($model,'course_price'); ?>

	</div>

	

	


<div class="row">

		<?php echo $form->labelEx($model,'payement_status'); ?>

		<?php echo $form->checkBox($model,'payement_status'); ?> <em>Check if the student has paid already</em>

		<?php echo $form->error($model,'payement_status'); ?>

	</div><br/><br/>

	

<div class="row">

		<?php echo $form->labelEx($model,'certification_date'); ?>

		<?php	$this->widget('zii.widgets.jui.CJuiDatePicker', array(

    'name'=>'student_courses[certification_date]',

	'value'=>$model->certification_date,

    // additional javascript options for the date picker plugin

    'options'=>array(

        'showAnim'=>'fold','altFormat'=>'dd/mm/yy','dateFormat'=>'dd/mm/yy','defaultDate'=>date('d/m/Y')

    ),

    'htmlOptions'=>array(

        'style'=>'height:20px;'

    ),

)); ?>

		

		<?php echo $form->error($model,'certification_date'); ?>

	</div>





<?php $this->endWidget(); ?>




</div>

<div class="success" style="display:none">This course and, all it's attached tasks, have been validated successfully.</div>


<?php $this->endWidget('zii.widgets.jui.CJuiDialog');?>



Does someone sees what i can’t see.

Regards,

xav

Did you manage to solve it??

I guess the line

$(\‘form#student-courses-form\’).submit(

should be removed because, as you don’t have a form submit button, this event will never be triggered…

Just compute the dataString and execute ajax!

Hi, yes but it seems it was a simple probelm of css, actually, a z-index problem.

Thanks,

xav