jquery ui Dialog: tidak dapat memanggil metode pada dialog sebelum inisialisasi

Saya memiliki aplikasi di jquery 1.5 dengan dialog berfungsi dengan baik. Meskipun saya memiliki banyak .live handler, saya mengubahnya menjadi .on. Untuk itu, saya harus mengupdate jquery (sekarang 1.8.3 dan jquerui 1.9.1).

Sekarang, saya mendapat: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Berikut kodenya:

Javascript

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

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

kode html

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

Adakah yang tahu mengapa ini mungkin terjadi?

Coba ini sebagai gantinya

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

Anda juga bisa melakukan:

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

Itu karena dialog tidak disimpan di $('#divDialog'), tetapi pada div baru yang dibuat dengan cepat dan dikembalikan oleh .dialog(opt)fungsi.

Jika Anda tidak dapat meningkatkan jQuery dan Anda mendapatkan:

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

Anda dapat mengatasinya seperti ini:

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

Atau jika Anda mengontrol tampilan dan mengetahui bahwa tidak ada dialog lain yang harus digunakan sama sekali di seluruh halaman, Anda dapat melakukan:

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

Saya hanya akan merekomendasikan melakukan ini jika penggunaan closestmenyebabkan masalah kinerja. Ada kemungkinan cara lain untuk mengatasinya tanpa melakukan penutupan global pada semua dialog.

Saya mendapat kesalahan ini ketika saya hanya memperbarui perpustakaan jquery tanpa memperbarui perpustakaan jqueryui secara paralel. Saya menggunakan jquery 1.8.3 dengan jqueryui 1.9.0. Namun, ketika saya mengupdate jquery 1.8.3 ke 1.9.1 saya mendapatkan error di atas. Ketika saya mengomentari .closebaris metode menyinggung , itu kemudian melemparkan kesalahan tentang tidak menemukan.browserdi perpustakaan jquery yang tidak digunakan lagi di jquery 1.8.3 dan dihapus dari jquery 1.9.1. Jadi pada dasarnya, pustaka jquery 1.9.1 tidak kompatibel dengan pustaka jquery ui 1.9.0 meskipun halaman unduh ui jquery mengatakan itu berfungsi dengan jquery 1.6+. Pada dasarnya, ada bug yang tidak dilaporkan saat mencoba menggunakan versi yang berbeda dari keduanya. Jika Anda menggunakan versi jquery yang dibundel dengan unduhan jqueryui, saya yakin Anda akan baik-baik saja, tetapi ketika Anda mulai menggunakan versi yang berbeda, Anda keluar jalur dan mendapatkan kesalahan seperti ini. Jadi, singkatnya, kesalahan ini berasal dari versi yang salah cocok (dalam kasus saya).

Jadi Anda menggunakan ini:

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

dan jika Anda membuka MVC Partial View dalam Dialog, Anda dapat membuat tombol tersembunyi dan peristiwa klik JQUERY dalam indeks:

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

Kemudian di dalam tampilan parsial html Anda memanggil tombol pemicu klik seperti:

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

sampai jumpa.

Jika Anda ingin segera membuka Dialog ketika Dialog diinisialisasi atau halaman sudah siap, Anda juga dapat menyetel parameter autoOpenke truedalam objek opsi dialog:

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

Jadi, Anda tidak perlu memanggil dialog `$ (" # divDialog "). (" Open ");

Ketika objek dialog diinisialisasi, dialog secara otomatis terbuka.

Versi UI jQuery yang baru tidak memungkinkan Anda memanggil metode UI pada dialog yang tidak diinisialisasi. Sebagai solusinya, Anda dapat menggunakan pemeriksaan di bawah ini untuk melihat apakah dialog masih hidup.

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

Ini juga beberapa solusi:

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

Saya hanya perlu menambahkan ScriptManager ke halaman. Masalah terselesaikan.

Dalam kasus saya, masalahnya adalah saya telah menelepon $("#divDialog").removeData(); sebagai bagian dari mengatur ulang data formulir saya dalam dialog.

Hal ini mengakibatkan saya menghapus struktur data bernama uiDialogyang berarti dialog harus diinisialisasi ulang.

Saya mengganti .removeData()dengan penghapusan yang lebih spesifik dan semuanya mulai bekerja kembali.

Kasus saya berbeda, gagal karena ruang lingkup ' ini ':

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

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

Saya mendapat pesan kesalahan ini karena saya memiliki tag div pada tampilan parsial, bukan pada tampilan induk