jquery ui Dialog: ไม่สามารถเรียกเมธอดบนไดอะล็อกก่อนการเริ่มต้น

ฉันมีแอพใน jquery 1.5 พร้อมกล่องโต้ตอบที่ใช้งานได้ดี ในขณะที่ฉันมีตัวจัดการ. live จำนวนมากฉันเปลี่ยนเป็น. ใน. เพื่อสิ่งนั้นฉันต้องอัปเดต 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>

มีความคิดว่าเหตุใดจึงอาจเกิดขึ้น

ลองใช้วิธีนี้แทน

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

คุณยังสามารถทำ:

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

นั่นเป็นเพราะกล่องโต้ตอบไม่ได้ถูกเก็บไว้ใน$('#divDialog')แต่ใน div ใหม่ที่สร้างขึ้นทันทีและส่งคืนโดย.dialog(opt)ฟังก์ชัน

หากคุณไม่สามารถอัพเกรด 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ทำให้เกิดปัญหาด้านประสิทธิภาพเท่านั้น มีวิธีอื่น ๆ ในการแก้ไขปัญหานี้โดยไม่ต้องปิดทั่วโลกในกล่องโต้ตอบทั้งหมด

ฉันได้รับข้อผิดพลาดนี้เมื่อฉันอัปเดตไลบรารี jquery โดยไม่ต้องอัปเดตไลบรารี jqueryui แบบขนาน ฉันใช้ jquery 1.8.3 กับ jqueryui 1.9.0 อย่างไรก็ตามเมื่อฉันอัปเดต jquery 1.8.3 เป็น 1.9.1 ฉันได้รับข้อผิดพลาดข้างต้น เมื่อฉันแสดงความคิดเห็นเกี่ยวกับการกระทำผิด.closeบรรทัดวิธีการที่มันทำให้เกิดข้อผิดพลาดเกี่ยวกับการไม่พบ.browserในไลบรารี jquery ซึ่งเลิกใช้แล้วใน jquery 1.8.3 และลบออกจาก jquery 1.9.1 ดังนั้นไลบรารี jquery 1.9.1 จึงไม่สามารถใช้งานร่วมกับไลบรารี jquery ui 1.9.0 ได้แม้ว่าหน้าดาวน์โหลด jquery ui จะบอกว่าทำงานกับ jquery 1.6+ โดยพื้นฐานแล้วมีข้อบกพร่องที่ไม่ได้รายงานเมื่อพยายามใช้เวอร์ชันที่แตกต่างกันของทั้งสองเวอร์ชัน หากคุณใช้เวอร์ชัน jquery ที่มาพร้อมกับการดาวน์โหลด jqueryui ฉันมั่นใจว่าคุณจะสบายดี แต่เมื่อคุณเริ่มใช้เวอร์ชันต่างๆที่คุณออกนอกเส้นทางที่ถูกตีและได้รับข้อผิดพลาดเช่นนี้ ดังนั้นโดยสรุปข้อผิดพลาดนี้มาจากเวอร์ชันที่จับคู่ไม่ถูกต้อง (ในกรณีของฉันอยู่แล้ว)

คุณจึงใช้สิ่งนี้:

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

และหากคุณเปิด MVC Partial View ใน Dialog คุณสามารถสร้างปุ่มที่ซ่อนอยู่ในดัชนีและเหตุการณ์คลิก JQUERY:

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

จากนั้นภายในมุมมองบางส่วน html คุณเรียกปุ่มทริกเกอร์คลิกเช่น:

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

แล้วเจอกัน.

หากคุณต้องการเปิดกล่องโต้ตอบทันทีเมื่อไดอะล็อกเริ่มต้นหรือเพจพร้อมแล้วคุณยังสามารถตั้งค่าพารามิเตอร์autoOpenเป็นtrueในอ็อบเจ็กต์อ็อพชันของไดอะล็อก:

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

ดังนั้นคุณไม่จำเป็นต้องเรียกกล่องโต้ตอบ `$ (" # divDialog ") (" open ");

เมื่อวัตถุโต้ตอบเริ่มต้นกล่องโต้ตอบจะเปิดขึ้นโดยอัตโนมัติ

jQuery UI เวอร์ชันใหม่จะไม่อนุญาตให้คุณเรียกใช้เมธอด UI ในกล่องโต้ตอบซึ่งไม่ได้เริ่มต้น คุณสามารถใช้การตรวจสอบด้านล่างเพื่อดูว่ากล่องโต้ตอบยังคงมีชีวิตอยู่หรือไม่

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

นี่เป็นวิธีแก้ปัญหา:

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

ฉันต้องเพิ่ม ScriptManager ลงในเพจ แก้ไขปัญหาแล้ว

ในกรณีของฉันปัญหาคือฉันได้เรียกว่า$("#divDialog").removeData();เป็นส่วนหนึ่งของการรีเซ็ตข้อมูลแบบฟอร์มของฉันภายในกล่องโต้ตอบ

สิ่งนี้ส่งผลให้ฉันล้างโครงสร้างข้อมูลที่ตั้งชื่อuiDialogซึ่งหมายความว่ากล่องโต้ตอบต้องเริ่มต้นใหม่

ฉันแทนที่.removeData()ด้วยการลบที่เฉพาะเจาะจงมากขึ้นและทุกอย่างก็เริ่มทำงานอีกครั้ง

กรณีของฉันแตกต่างออกไปมันล้มเหลวเนื่องจากขอบเขตของ ' this ':

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

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

ฉันได้รับข้อความแสดงข้อผิดพลาดนี้เนื่องจากฉันมีแท็ก div ในมุมมองบางส่วนแทนที่จะเป็นมุมมองหลัก