yii datepicker widget inside an iframe embedded in a fancybox

Question

Hi I am a total newbie to JS and am trying the following:

I am having a Yii application in which there is an ajaxLink that triggers a fancybox. This link renders a view in an iframe inside the fancybox. The rendered view is a form containing Yii zii.widgets.jui.CDatePicker widget. This renders the view and shows the date text field with proper date values. But onclick it doesnt show up the calendar.

Code triggering the fancybox:

echo CHtml::ajaxLink('Add Entry',Yii::app()->createUrl('site/myentry', array('action'=>'new')),
 array('type'=>'GET', 'update'=>'#adexp', 'complete'=>'afterAjax'));

js function:

function afterAjax()
{
$.fancybox({
    href : '#adexp',
    scrolling : 'no',
    transitionIn : 'fade',
    transitionOut : 'fade', 
width: 1024, 
height: 500,
autoDimensions: false,        
    onClosed: function() { $('#adexp').html(''); location.reload();},
});
}

Rendering the iframe for the form:

<iframe src="<?php echo $this->createUrl('site/entryform', array('UtcRecord'=>$model->UtcRecord, 'UserId'=>$model->UserId, 'action'=>$action));?>"  style="width: 100%; height:440px;" id="entryform"></iframe>

and the widget inside this form view:

$this->widget(
        'zii.widgets.jui.CJuiDatePicker',
        array(
        'model'     => $model,
        'attribute' => 'EntryTime',         
        'language'=> 'en',      
        'options'   => array(
            'dateFormat' => 'dd-mm-yy',
            'style'=>'z-index: 5000;',             
        ),
        )
    );

Observation made by Firebug: the input field in the form doesnt have the Datepicker class. If I use the same Yii widget code in a normal page, this class is present in the input tag and the widget works fine.

I tried: 1. Increasing the z-index of the datepicker widget to 5000. 2. Including jquery and css manually in iframe head tag since I thought iframe might not be picking up styles and js.

Could this be a Yii widgets rendering issue inside an iframe?

Would really appreciate any insights on the issue. :-)

Are you using renderPartial() in your controller to output the html for the fancyBox? — topher
Yes, I do a renderPartial() in site/myentry which then triggers the fancybox. — Sanand Sule

topher topher · Accepted Answer · 2013-01-07T15:41:48

Change your renderPartial() to

$this->renderPartial('path.to.view',$variables_into_view,false,true);

The last parameter is $processOutput which calls CController::processOutput() which inserts the required client scripts (in your case the datePicker js and css) into the output.

yii datepicker widget inside an iframe embedded in a fancybox

1 Answers