jquery ui Dialog: không thể gọi các phương thức trên hộp thoại trước khi khởi tạo

Tôi có một ứng dụng trên jquery 1.5 với các hộp thoại hoạt động tốt. Trong khi tôi có rất nhiều trình xử lý .live, tôi đã thay đổi điều này thành .on. Đối với điều đó, tôi phải cập nhật jquery (bây giờ là 1.8.3 một jquerui 1.9.1).

Bây giờ, tôi có: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Sau đây là mã:

Javascript

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

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

Mã HTML

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

Bất kỳ ý tưởng tại sao điều này có thể xảy ra?

Hãy thử cái này thay thế

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

Bạn cũng có thể làm:

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

Đó là bởi vì hộp thoại không được lưu trữ trong $('#divDialog'), nhưng trên một div mới được tạo nhanh chóng và được .dialog(opt)hàm trả về .

Nếu bạn không thể nâng cấp jQuery và bạn nhận được:

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

Bạn có thể làm việc xung quanh nó như vậy:

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

Hoặc nếu bạn kiểm soát chế độ xem và biết không có hộp thoại nào khác nên được sử dụng trên toàn bộ trang, bạn có thể làm:

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

Tôi chỉ khuyên bạn nên làm điều này nếu việc sử dụng closestgây ra sự cố về hiệu suất. Có nhiều cách khác để giải quyết vấn đề này mà không cần đóng toàn cục trên tất cả các hộp thoại.

Tôi gặp lỗi này khi chỉ cập nhật thư viện jquery mà không cập nhật song song thư viện jqueryui. Tôi đang sử dụng jquery 1.8.3 với jqueryui 1.9.0. Tuy nhiên, khi tôi cập nhật jquery 1.8.3 lên 1.9.1, tôi gặp lỗi ở trên. Khi tôi nhận xét ra các .closedòng phương pháp vi phạm , nó sẽ báo lỗi không tìm thấy.browsertrong thư viện jquery không được chấp nhận trong jquery 1.8.3 và bị xóa khỏi jquery 1.9.1. Vì vậy, về cơ bản, thư viện jquery 1.9.1 không tương thích với thư viện jquery ui 1.9.0 mặc dù trang tải xuống jquery ui nói rằng nó hoạt động với jquery 1.6+. Về cơ bản, có những lỗi không được báo cáo khi cố gắng sử dụng các phiên bản khác nhau của cả hai. Nếu bạn sử dụng phiên bản jquery đi kèm với tải xuống jqueryui, tôi chắc chắn rằng bạn sẽ ổn, nhưng khi bạn bắt đầu sử dụng các phiên bản khác nhau, bạn sẽ bị lỗi và gặp lỗi như thế này. Vì vậy, tóm lại, lỗi này là do các phiên bản khớp sai (dù sao trong trường hợp của tôi).

Vì vậy, bạn sử dụng cái này:

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

và nếu bạn mở Chế độ xem từng phần MVC trong Hộp thoại, bạn có thể tạo trong chỉ mục một nút ẩn và sự kiện nhấp JQUERY:

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

sau đó bên trong html xem một phần, bạn bấm vào nút gọi kích hoạt như:

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

hẹn gặp lại sau.

Nếu bạn muốn mở Dialog ngay lập tức khi Dialog được khởi tạo hoặc trang đã sẵn sàng, bạn cũng có thể thiết lập các thông số autoOpenđể truetrong các tùy chọn đối tượng của hộp thoại:

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

Do đó, bạn không phải gọi hộp thoại `$ (" # divDialog "). (" Open ");

Khi đối tượng hộp thoại được khởi tạo, hộp thoại sẽ tự động được mở.

Phiên bản giao diện người dùng jQuery mới sẽ không cho phép bạn gọi các phương thức giao diện người dùng trên hộp thoại chưa được khởi tạo. Để giải quyết vấn đề, bạn có thể sử dụng kiểm tra bên dưới để xem hộp thoại có còn hoạt động hay không.

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

Đây cũng là một số công việc xung quanh:

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

Tôi chỉ cần thêm ScriptManager vào trang. Vấn đề đã được giải quyết.

Trong trường hợp của tôi, vấn đề là tôi đã gọi $("#divDialog").removeData();như một phần của việc đặt lại dữ liệu biểu mẫu của mình trong hộp thoại.

Điều này dẫn đến việc tôi xóa một cấu trúc dữ liệu được đặt tên uiDialogcó nghĩa là hộp thoại phải khởi động lại.

Tôi đã thay thế .removeData()bằng các lần xóa cụ thể hơn và mọi thứ bắt đầu hoạt động trở lại.

Trường hợp của tôi thì khác, nó không thành công vì phạm vi của ' this ':

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

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

Tôi nhận được thông báo lỗi này vì tôi có thẻ div trên chế độ xem một phần thay vì chế độ xem chính