我试图将模态窗口添加到我的 yii 应用程序中。为此,我使用框架中的 jquery。然而,它不适用于框架中的 jquery(1.8.3):framework/web/js/source
错误是:
Uncaught TypeError: Object [object Object] has no method 'modal'
在这一行:
$('#dataModal').modal().css({
width: 'auto',
height: 'auto',
});
(请参阅下面的完整代码)。
当我将 modal() 交换为 dialog() 时,也会发生同样的情况。
然而,当我尝试通过 googleapis 通过将其注册为客户端脚本来上传最新的 jquery(1.10.2)时,它可以工作(虽然每次视图调用只有一次): config/main.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 引导扩展,我确实使用它,并且在 bootstrap.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>