web-dev-qa-db-ja.com

jquery ui Dialog:初期化前にダイアログでメソッドを呼び出すことはできません

ダイアログが正常に機能するjquery 1.5のアプリがあります。私はたくさんの.liveハンドラを持っていますが、これを.onに変更しました。そのためには、jquery(現在は1.8.3とjquerui 1.9.1)を更新する必要があります。

今、私は得た:Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

コードは次のとおりです。

Javascript

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

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

htmlコード

<div id="divDialog">
<div id="divInDialog"></div>
</div>

なぜこれが起こっているのでしょうか?

94
core-chain.io

代わりにこれを試してください

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

次のこともできます。

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

これは、ダイアログが$('#divDialog')ではなく、その場で作成され、.dialog(opt)関数によって返される新しいdivに保存されるためです。

126

JQueryをアップグレードできず、次のエラーが発生する場合:

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

次のように回避できます:

$(selector).closest('.ui-dialog-content').dialog('close');

または、ビューを制御し、ページ全体で他のダイアログをまったく使用しないことがわかっている場合は、次のようにすることができます。

$('.ui-dialog-content').dialog('close');

closestを使用するとパフォーマンスの問題が発生する場合にのみ、これを行うことをお勧めします。すべてのダイアログでグローバルに閉じることなく、この問題を回避する他の方法がある可能性があります。

19
Cymen

Jqueryuiライブラリを並行して更新せずにjqueryライブラリのみを更新すると、このエラーが発生しました。 jqueryui 1.9.0でjquery 1.8.3を使用していました。ただし、jquery 1.8.3を1.9.1に更新すると、上記のエラーが発生しました。問題のある.closeメソッドの行をコメントアウトすると、jquery 1.8.3で非推奨になり、jquery 1.9.1から削除されたjqueryライブラリで.browserが見つからないというエラーがスローされました。そのため、基本的に、jquery 1.9.1ライブラリは、jquery uiダウンロードページがjquery 1.6+で動作すると言っているにもかかわらず、jquery ui 1.9.0ライブラリと互換性がありませんでした。基本的に、2つの異なるバージョンを使用しようとすると、報告されていないバグがあります。 jqueryuiダウンロードにバンドルされているjqueryバージョンを使用する場合は、きっと大丈夫でしょうが、異なるバージョンを使用し始めると、beat地から外れてこのようなエラーが発生します。したがって、要約すると、このエラーはバージョンの不一致によるものです(とにかく私の場合)。

9
johntrepreneur

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

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

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

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

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

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

またね.

3

ダイアログが初期化されたとき、またはページの準備ができたときにダイアログをすぐに開きたい場合は、ダイアログのオプションオブジェクトでパラメータautoOpentrueに設定することもできます。

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

したがって、 `$("#divDialog ")。dialog(" open ");を呼び出す必要はありません。

ダイアログオブジェクトが初期化されると、ダイアログが自動的に開きます。

2
Gašper Sladič

これも回避策です。

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();
0

私の場合は異なりますが、「this」のスコープのために失敗します:

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});
0
datdinhquoc

私の場合、問題は、ダイアログ内でフォームデータをリセットする一環として$("#divDialog").removeData();を呼び出していたことです。

これにより、uiDialogという名前のデータ構造が消去されたため、ダイアログを再初期化する必要がありました。

.removeData()をより具体的な削除に置き換え、すべてが再び機能し始めました。

0
AnthonyVO

新しいjQuery UIバージョンでは、初期化されていないダイアログでUIメソッドを呼び出すことはできません。回避策として、以下のチェックを使用して、ダイアログが生きているかどうかを確認できます。

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}
0
Tomin

ScriptManagerをページに追加する必要がありました。問題は解決しました。

0
gnardizzi