初期化の前にダイアログのメソッドを呼び出すことはできません。メソッド 'open'を呼び出そうとしました

Question

私はこのスクリプトを使ってダイアログを開きます。しかし、それはエラーがスローされます。ここでは

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

は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は競合していますか？

Answer 1

open関数を呼び出す前に、jqueryダイアログを初期化する必要があります。あなたのHTMLでは、頭の要素のjqueryの初期化を行うことができます。

jsファイルを変更して、ダイアログコードをinitializeDialog（）関数に設定します。

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

Answer 2

私はここで何が問題なのか理解しました。私の場合、問題はhtmlコードにあります。私のHTMLコードに誤りがあります。私はCSSクラスの使用に間違っていました。一度エラーを修正すると、コードはうまく動作します。