我试图为我的 yii 应用程序添加模态窗口。为此,我使用框架中的jquery。然而,它不适用于框架中的jquery(1.8.3(:framework/web/js/source
错误是:
未捕获的类型错误: 对象 [对象对象] 没有方法"模态">
在此行中:
$('#dataModal').modal().css({
width: 'auto',
height: 'auto',
});
(请参阅下面的完整代码(。 当我将 modal(( 交换到 dialog(( 时也会发生同样的情况。
然而,当我尝试通过googleapis上传最新的jquery(1.10.2(并将其注册为客户端脚本时,它可以工作(尽管每次视图调用只有一次(:配置/主.php:
'components'=>array(
...
'clientScript'=>array(
'packages'=>array(
'jquery'=>array(
'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
'js'=>array('jquery.min.js'),
),
),
),
并在视图中注册它:
Yii::app()->clientScript->registerCoreScript('jquery');
与该案例有关的完整代码在这里:
<!-- modal window -->
<?php $this->beginWidget('bootstrap.widgets.TbModal',
array('id'=>'dataModal')); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><?=Yii::t("ui", "Выберите номенклатуру")?></h4>
<!--?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>Yii::t("ui", "Справочник номенклатуры"),
'url'=>$this->createUrl('assortment/index'),
'htmlOptions'=>array('data-dismiss'=>'modal', 'class' => 'btn btn-medium btn-primary', /*'style'=>'float:right; clear:both;'*/),
)); ?-->
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>Yii::t("ui", "Справочник номенклатуры"),
'url'=>Yii::app()->createUrl('assortment/index'),
'htmlOptions'=>array(/*'data-dismiss'=>'modal',*/ 'class' => 'btn btn-medium btn-primary', 'style'=>'float:left; /*clear:both;*/'),
));
$this->widget('bootstrap.widgets.TbButton', array(
'label'=>Yii::t("ui", "Отмена"),
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
</div>
<?php $this->endWidget(); ?>
<!-- modal end -->
...
<script type="text/javascript">
// this function calls the modal thru AJAX
$('#data-select-btn').click(function(){
var buttn = this;
// $(buttn).button('loading');
$.ajax({
url: "<?php echo $this->createAbsoluteUrl('order/loadData') ?>", /*LoadDataCheckBox*/
cache: false,
data: "type="+$("#Order_type").val(),
success: function(html){
$(".modal-body").html(html);
//$(buttn).button('reset');
$('#dataModal').modal().css({
width: 'auto',
height: 'auto',
'margin-top': '-50px',
'margin-left': function () {
return -($(this).width() / 2) - 80;
},
});
}
});
})
</script>
对于 Jquery-ui,这些还包括:
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui-i18n.min.js"></script>
更新
就 Yii 引导扩展而言,我确实使用它,在引导中.js有模态类定义和插件定义。这个文件是在jquery之后加载的,但在jquery-ui之前,序列重要吗?
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
...
<script type="text/javascript" src="/application/assets/7d883f12/js/bootstrap.js"></script>
视图文件结束:
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui-i18n.min.js"></script>
试试这个...在order/loadData
确保您的 renderPartial 不会再次加载脚本。
$this->renderPartial('view_partial', array(
'model' => $model,
), false, false);
http://www.yiiframework.com/doc/api/1.1/CController#renderPartial-detail
顺序很重要。
你应该首先加载jquery,然后加载jquery-ui,thw bootsttrap.js
尝试在注册脚本中指示位置:
Yii::app()->clientScript->registerCoreScript('jquery', CClientScript::POS_HEAD);
更多信息在这里: http://www.yiiframework.com/doc/api/1.1/CClientScript#registerScriptFile-detail
你是如何包含jQuery UI的?
===编辑===尝试使用以下方法更改配置/主脚本的顺序:
'components'=>array(
...
'clientScript' => array(
'coreScriptPosition' => CClientScript::POS_END,
)
),
如果没有任何效果,只需像这样禁用自动运行:
'clientScript' => array(
'scriptMap'=>array(
'jquery.js'=>false,
'jquery.min.js'=>false
),
),
然后加载,就像过去一样;)
<script src="<?php echo $this->baseURL ?>/js/jquery.min.js"></script>