通过Yii中的jQuery调用模式窗口失败 [英] Failure invoking a modal window through jquery in Yii

问题描述

我试图向我的yii应用程序添加模式窗口. 为此，我使用框架中的jquery. 但是，它不适用于以下框架中的jquery(1.8.3): framework/web/js/source
错误是:
未捕获的TypeError:对象[object Object]没有方法'modal'
在这一行:

I tried to add modal window to my yii app. For this I use jquery from the framework. Yet, It does not work with jquery (1.8.3) from the framework: framework/web/js/source
The error is:
Uncaught TypeError: Object [object Object] has no method 'modal'
In this line:

$('#dataModal').modal().css({
            width: 'auto',
            height: 'auto',
    });

(请参阅下面的完整代码).
当我将modal()交换到dialog()时，也会发生同样的情况.

(see the full code below).
The same happens when I exchange modal() to dialog().

但是，当我尝试通过将googleapis注册为客户端脚本来通过googleapis上传最新的jquery(1.10.2)时，它可以正常工作(尽管每次视图调用仅一次): config/main.php:

Yet, when I try to upload the latest jquery (1.10.2) through googleapis by registering it as a client script, it works (only one time at each view call though): 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');

有关此案的完整代码在这里:

The full code pertaining to the case is here:

<!-- 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，这些还包括:

For Jquery-ui these are also included:

<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之前，顺序重要吗?

Update

As far as Yii bootstrap extention I do use it, and in bootstrap.js there is the modal class definition and plugin definition. This file is being loaded after jquery, yet before jquery-ui, does sequence matter?

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

推荐答案

顺序很重要.

您应该先加载jquery，然后再加载jquery-ui，然后再启动bootsttrap.js

You should first load jquery, then jquery-ui, thw bootsttrap.js

尝试指出registerScript中的位置:

Try indicate the position in the registerScript:

Yii::app()->clientScript->registerCoreScript('jquery', CClientScript::POS_HEAD);

此处的更多信息: http://www.yiiframework.com/doc/api/1.1/CClientScript#registerScriptFile-detail

以及您如何包含jQuery UI?

And how you are including the jQuery UI?

===编辑=== 尝试使用以下命令更改config/main中脚本的顺序:

===EDIT=== Try changing the order of the scripts in the config/main using this:

'components'=>array(
...
    'clientScript' => array(
        'coreScriptPosition' => CClientScript::POS_END,
    )
),

如果没有任何效果，则可以像这样禁用自动搜索:

If nothing work, just disable the autoloding like that:

'clientScript' => array(
    'scriptMap'=>array(
        'jquery.js'=>false,
        'jquery.min.js'=>false
    ),
),

然后加载，就像过去一样；)

And load then just like the old days ;)

<script src="<?php echo $this->baseURL ?>/js/jquery.min.js"></script>

这篇关于通过Yii中的jQuery调用模式窗口失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！