web-dev-qa-db-ja.com

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

私はjQueryからこのエラーを突然受け取ります：

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

プラグイン

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

jQueryコード

次の関数でこれらのメッセージを取得しています：

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>
javascriptjqueryhtmljquery-ui
50
devdar

ボタンが正しく宣言されていないようです（とにかく 最新のjQuery UIドキュメント に従って）。

以下を試してください：

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});
20
Evil Raat

Asp.net MVCで部分的なレイアウトのダイアログを開くと、同様の問題が発生しました。このエラーが発生する原因となったメインページだけでなく、部分ページにもjqueryライブラリをロードしていました。

25
Behr

これを試してください-それは私のために働く：

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

それがあなたを助けることを願っています

14
EdsonF

Imも同じエラーを受け取りました。初期化の前にダイアログでメソッドを呼び出すことはできません。メソッド 'close'を呼び出そうとしました

私がやったことは、ダイアログヘッダーにある閉じるボタンイベントをトリガーしたことです

これは私がダイアログを閉じるためにうまく機能しています

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}
10
Senguttuvan Amaladass

$(this).dialog("close")は、Ajaxの「成功」コールバック内から呼び出される可能性がありますか？その場合は、$.ajax()呼び出しのオプションの1つとしてcontext: thisを追加してみてください。

$("#dialog").dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $.ajax({
                url: '/path/to/request/url',
                context: this,
                success: function(data)
                {
                    /* Calls involving $(this) will now reference 
                       your "#dialog" element. */
                    $(this).dialog( "close" );
                }
            });
        }
    }
});
9
Adrian Lopez

何らかの理由でjQuery UIが定義時にボタンで定義されたすべてのコードを実行しようとするようです。クレイジーですが、同じ問題があり、この変更を行うと停止しました。

if ($(this).dialog.isOpen === true) { 
    $(this).dialog("close");
}
4
JohnPan

1.10.2でも同じエラーが発生しました。私の場合、どの要素に基づいているかに関係なく、背景オーバーレイをクリックすると、現在表示されているダイアログが非表示になります。したがって、私はこれを持っていました：

$('body').on("click", ".ui-widget-overlay", function () {
    $(".ui-dialog").dialog('destroy');
});

これは以前は機能していたため、ある時点でポップアップ自体で.dialog（）を呼び出すためのJQUIのサポートを削除したに違いないと思います。

私の回避策は次のようになります。

$('body').on("click", ".ui-widget-overlay", function () {
    $('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});
3
Peter Herdenborg

私は同じことにつまずいて、私のソリューションを共有したいと思いました：

<script type="text/javascript">
    $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                         //here "this" is the ajax object                                       
                            $(this).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        //here, "this" is correctly the dialog object
                        $(this).dialog( "close" );
                    }
                });
</script>

「this」は非ダイアログオブジェクトを参照しているため、エラーが表示されました。

解決：

<script type="text/javascript">
    var theDialog = $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                            $(theDialog).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        $(this).dialog( "close" );
                    }
                });
</script>
1
osh

1つのダイアログボックスがこのエラーをスローする前に、この問題が一度発生しましたが、他のすべてのダイアログボックスは完全に機能していました。答えは、ページ上に同じid="dialogBox" elseウェアを持つ別の要素があったためです。検索中にこのスレッドを見つけたので、これが誰かの助けになることを願っています。

1
Andrew Fox

あなたはこれを使用します：

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

また、ダイアログでMVC部分ビューを開くと、インデックスに非表示ボタンとJQUERYクリックイベントを作成できます。

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

次に、部分ビューhtml内で次のようにボタントリガーをクリックします。

$("#YouButton").trigger("click")

じゃあ。

1
Danilo Antonietto

これは、私のajaxがページのコンテンツを置き換え、ダイアログの2つの要素が同じクラスになったために発生しました。つまり、CSSクラスセレクターに基づいてダイアログを閉じる行が実行され、 2つ目は初期化されていません。

$(".dialogClass").dialog("close"); //This line was expecting to find one element but found two where the second had not been initialised.

JavaScriptがメインコンテンツ領域のみを置換するため、コントローラーアクションが要素を含む共有レイアウトページを含む完全なビューを返していたため、ASP.NET MVCの誰でもこれが発生しました。

1
Alan Macdonald

ダイアログ本文内のボタンを使用してダイアログを閉じようとすると、このエラーメッセージが表示されました。 $('#myDialog').dialog('close');を使用しようとしましたが、機能しませんでした。

最終的に、ヘッダーの「x」ボタンのクリックアクションを実行しました。

$('.modal-header:first').find('button:first').click();
0
Crackerjack

特定のオブジェクトIDを使用してダイアログを閉じるために呼び出すことができる別個のJavaScript関数を作成し、次のように$(document).ready()の外側に関数を配置します。

function closeDialogWindow() { 
$('#dialogWindow').dialog('close');
}

注：関数は$(document).ready()の外側で宣言する必要があるため、jQueryはDOMで作成される前にダイアログでcloseイベントをトリガーしようとしません。

0
John Verco

ダイアログ宣言の外でボタン配列を定義することで解決した同様の問題がありました。

var buttonArray = {};
buttonArray["Ok"] = function() { $( this ).dialog( "close" );}

オプションは次のようになります。

modal: true,
autoOpen: false,
buttons: buttonArray
0
stead

私は同じ問題を抱えており、フォームデータが同じデータのままになるのを防ぐためにコンテンツを削除する必要があるという問題がいくつかのダイアログを開き、ダイアログがこれらのパラメータを作成します

var dialog = $("#dummy-1");

    dialog.html('<div style="position:absolute; top:15px; left:0px; right:0px; bottom:0px; text-align:center;"><img align="middle" src="cargando.gif"></div>');
    dialog.html(mensaje);
    dialog.dialog(
    {
        title:'Ventana de Confirmacion',
        width:400, 
        height:200, 
        modal:true,
        resizable: false,
        draggable:false,
        position: { my: "center center", at: "center center", of: window },
        buttons:
        [
            {
                text: "Eliminar",
                click: function() {
                    functionCall(dialog,var1,var2);
                }
            },
            {
                text: "Cerrar",
                click: function() {
                    dialog.dialog("close");
                }
            }
        ],
        close: function(event, ui)
        {
            dialog.dialog("close").dialog("destroy").remove();
        }
    });

そして、ダイアログはアクションを実行するために関数にパラメーターとして渡されます。

    function functionCall(dialogFormulario,var1,var2)
{
    //same action 
        dialogFormulario.dialog("close");

}

ここでは、ダイアログがその関数closeを呼び出すため、.dialog（ "close"）とno .dialog（ "destroy"）のみを使用する必要があり、要素は存在しません。

0
KristKing

1時間後、私は最良のアプローチを見つけました。ダイアログの結果を変数に保存し、その後変数のcloseメソッドを呼び出します。

このような：

var dd= $("#divDialog")
.dialog({
   height: 600,
   width: 600,
   modal: true,
   draggable: false,
   resizable: false
});

// . . .

dd.dialog('close');
0
Hamed Khatami

これは非常に古いことはわかっていますが、angularルートをナビゲートする必要があり、ダイアログが開いているときに同じ問題が発生し、開いたままになりました。そこで、ルートコントローラーデストラクターでcloseメソッドを呼び出す回避策を得ました。しかし、ダイアログが開いていない場合、上記のエラーが発生しました。したがって、初期化の前にダイアログを閉じている場合、このエラーが発生します。ダイアログが開いているかどうかを確認して閉じると、この状態で閉じる状態がラップされます。

if($('#mydialog').dialog('isOpen')) { //close dialog code}
0
Sahib Khan

Senguttuvan：あなたのソリューションは私のために働いた唯一のものでした。

関数btnClose（）{
$（ "。ui-dialog-titlebar-close"）。trigger（ 'click'）;
}

0
user1229595

ダイアログの外でボタンの内容を宣言したいかもしれませんが、これは私にとってはうまくいきます。

var closeFunction = function() {
    $(#dialog).dialog( "close" );
};

$('#dialog').dialog({
    modal: true,
    buttons: {
        Ok: closeFunction
    }
});
0
jpotterh

同様の問題があり、私の場合、問題は異なっていました（Djangoテンプレートを使用しています）。

JSの順序は異なっていました（最初に確認することは知っていますが、そうではないことはほぼ確実でしたが、そうでした）。ダイアログを呼び出すjsは、jqueryUIライブラリが呼び出される前に呼び出されました。

私はDjangoを使用しているため、テンプレートを継承し、{{super.block}}を使用してブロックからテンプレートにコードを継承していました。問題を解決したブロックの最後に{{super.block}}を移動する必要がありました。ダイアログを呼び出すjsは、Djangoのadmin.pyのMediaクラスで宣言されました。私はそれを理解するために1時間以上を費やしました。これが誰かを助けることを願っています。

0
Anupam