初始化之前无法在对话框上调用方法;试图打电话给方法'打开'

时间:2017-03-27 02:58:31

标签: jquery jquery-ui

我正在使用此脚本打开一个对话框。但是,它会引发错误:

  

错误:在初始化之前无法调用对话框上的方法;试图调用方法'打开'

以下是HTML代码:

<div class="content-wrapper" style="display:none">
    <div id="dialog-error" title="LIST ERROR">
        <div class="row">
            <div class="">
                <div class="col-md-4">
                    <span class="text text-green"><b>FIELD</b></span>
                    <div id="container-field">
                        <table class="table table-condensed table-bordered table-hover" >
                            <tbody id="container-field-error">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <span class="text text-green"><b>ERROR MESSAGE</b></span>
                        <div id="container-message" style="min-height: 150px">

                        </div>
                    </div>
                    <div class="row">
                        <span class="text text-green"><b>TYPE</b></span>
                        <div id="container-type" style="min-height: 150px">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是脚本:

$("#dialog-error").dialog({
        autoOpen: false,
        width: '700px',
        resizeable: false,
        position: {
            my: 'top',
            at: 'top+150',
            of: window
        }
    });
$('.btn-list-error').live('click', function () {
        $('#dialog-error').dialog('open');
    });

以下是我的代码中的jQuery版本:

<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jQuery/jQuery-2.1.4.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jQuery/jQuery-migrate-1.2.1.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/bootstrap.min.js"></script>
<!--<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery.ui.touch-punch.min.js"></script>-->
<script class="include" type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/common-scripts.js"></script>

任何人都可以帮我解决这里的问题吗?是jQuery冲突吗?

2 个答案:

答案 0 :(得分:0)

在调用open函数之前,必须初始化jquery对话框。在你的html中,你可以在head元素中初始化jquery。

<script type="text/javascript">
    $(document).ready(function () {
         initializeDialog();
    });
</script>

并更改你的js文件,使其具有initializeDialog()函数中的对话框代码。

function initializeDialog(){
  $("#dialog-error").dialog({
    autoOpen: false,
    width: '700px',
    resizeable: false,
    position: {
        my: 'top',
        at: 'top+150',
        of: window
    }
  });
}

答案 1 :(得分:0)

我弄清楚这里有什么问题。就我而言,问题出在html代码中。我的html代码中有错误。我在使用css类时错了。一旦我修复了错误,代码运行良好。