【问题标题】:yii datepicker widget inside an iframe embedded in a fancyboxyii datepicker 小部件内嵌在fancybox 中的 iframe
【发布时间】:2013-01-07 10:58:51
【问题描述】:

您好,我是 JS 的新手,正在尝试以下方法:

我有一个 Yii 应用程序,其中有一个 ajaxLink 触发了一个幻想框。此链接在幻想框内的 iframe 中呈现视图。渲染视图是一个包含 Yii zii.widgets.jui.CDatePicker 小部件的表单。这将呈现视图并显示具有正确日期值的日期文本字段。但是点击它并没有显示日历。

触发fancybox的代码:

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

js函数:

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

为表单渲染 iframe:

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

以及此表单视图中的小部件:

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

Firebug 的观察结果: 表单中的输入字段没有 Datepicker 类。如果我在普通页面中使用相同的 Yii 小部件代码,则此类存在于输入标签中并且小部件工作正常。

我试过了: 1. 将 datepicker 小部件的 z-index 增加到 5000。 2.在iframe head标签中手动包含jquery和css,因为我认为iframe可能不会拾取样式和js。

这可能是 iframe 内的 Yii 小部件呈现问题吗?

非常感谢您对此问题的任何见解。 :-)

【问题讨论】:

  • 您是否在控制器中使用renderPartial() 为fancyBox 输出html?
  • 是的,我在 site/myentry 中做了一个 renderPartial(),然后触发了 fancybox。

标签: iframe yii fancybox jquery-ui-datepicker


【解决方案1】:

将您的 renderPartial() 更改为

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

最后一个参数是$processOutput,它调用CController::processOutput(),它将所需的客户端脚本(在您的情况下为datePicker js 和css)插入到输出中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多