ActiveForms in Cjuidialog are unaccessible

Yii 1.1 General Discussion
1

Hi,

Has anyone experienced that strange behavior when using an ajaxlink to open a CJuidialog with an activForm and no controls are accessible ?

In Main view we’ve got


<div id="dialogAssign" style="display:none;"></div> // the container for the dialog




//now the ajaxLink


<?php echo CHtml::ajaxLink('Assign a course to this student',$this->createUrl('/student_courses/createDialog?frm=student&cid='.$model->id),array('onclick'=>'$("#dialogAssign").dialog("open");return false;','update'=>'#dialogAssign'),array('id'=>'showDialogAssign')); ?>

And this is how lloks the view createDialog




<?php 

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

                'id'=>'createDialog',

                'options'=>array(

                    'title'=>Yii::t('student_courses','Assign a new course'),

                    'autoOpen'=>true,

                    'modal'=>true,

                    'show'=>'scale',

                    'hide'=>'puff',

                    'width'=>'400',

                    'height'=>'400',

                    'buttons'=>array(

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

                ),

                                

                ));

               

               

                 

echo $this->renderPartial('_formDialog', array('model'=>$model)); 


?>

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

And there goes the form




<div class="form">




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

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

	'enableAjaxValidation'=>true,

	

));


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

		<?php echo $form->textArea($model,'remarks',array('rows'=>6, 'cols'=>50)); ?>

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

	</div>


	<div class="row">

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

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

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

	'id'=>'student_coursecertification_date',

	'model'=>$model,

	'value'=>$model->getAttribute('certification_date'),

    // additional javascript options for the date picker plugin

    'options'=>array(

        'showAnim'=>'fold','altFormat'=>'yyyy-mm-dd','dateFormat'=>'yy-mm-dd',

    ),

    'htmlOptions'=>array(

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

    ),

)); ?>

		

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

	</div>

<br/>

	<div class="row buttons">

		<?php echo CHtml::ajaxSubmitButton($model->isNewRecord ? 'Create' : 'Save',array('type'=>'POST','update'=>'#StatusBar',)); ?>

	</div>

	


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


</div><!-- form -->

Everything seems fine except that the form in completely inaccessible and I can only close the dialog through the right-top corner cross. Firebug is silent after the dialog has opened…no trace on the console.

I’ve spent several days in trying to solve this but something is clearly missing me.

Regards,

xav

2

I would have expected at least the Cancel button should work.

Anyway, depending on what you already have (or rather don’t have) in the main view, you may try setting the fourth parameter of renderPartial to true.




echo $this->renderPartial('_formDialog', array('model'=>$model), false, true);

(not tested)

/Tommy

3

Hey Tommy, thanks for the answer.

I’ve tried your solution but it didn’t change anything.

The form is still unclickable !

I see everything but I can’t touch anything (beside that native cross).

I tried to avoid the renderPartial thing by enclosing the form right away (so no rendering) and it didn’t change anything at all. So, the partial rendering doesn’t seem to trigger the problem.

Crazy problem !!!!

Thanks anyway.

Regards,

4

I think you have more than one problem here. I know this hierarchy of components can work, I’ve done something similar. That’s why I became interested in what you’re trying to do (I still need to find out a more generic structure).

First I think you should try to fix the close button. To me it seems like there’s no button property in CJuiDialog. Try replacing the button array with just the close handler definition.

/Tommy

5

Ok, cancel button added and working but the inputs are still not accessible. I think JQuery has gone crossed and miss the focus on the dialog for wathever reason.

6

Sounds like a z-index issue? Some element is overlaying the form so you can’t click any of the fields.

What element comes up when you use the inspect option in firebug.

Or it could be some invalid options in the dialog/datepicker.

7

Hello Alex, I’ve tried to change zindex and also to remove completely the date widget and this brought no change to the situation. Firebug remains silent after the dialog is displayed. I really don’t know where to look for. I’m quite sure i’m not the aonly one trying to do so. I think the problem comes up when from within one page you have the possibility to open several different dialogs. In my particular case, as firebug doesn’t respond neither the form inputs i think jquery must have gone crossed when opening the dialog.

xav

8

If you use the inspector in firebug you can find what element has the top most position (Click the little blue mouse icon on the top left of toolbar) then move your mouse over the dialog (Should add a border to indicate the element below).

9

Dear Alex,

You were right IT IS a z-index thing !!! Apparently i tested the z-index on a wrong level. The inspector helped me a lot thanks to you. Now the forms are working.

I really though it was a more trickier problem but it was a simple z-index thingy !!!

Again, this is forum with high quality members.

Thanks again Alex.

Best Regards,

Xavier

10

Glad I could help :)

Firebug is your best friend with little funnys like these.