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

Question

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 thành .on. Vì vậy, 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 nhận: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Tiếp theo là các mã:

Javascript

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

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

HTML code

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

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

Answer 1

Hãy thử điều này thay vì

$(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 ra một cách nhanh chóng và được trả về bởi chức năng .dialog(opt).

Answer 2

Tôi gặp lỗi này khi tôi chỉ cập nhật thư viện jquery mà không cập nhật thư viện jqueryui song song. Tôi đã 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 đã nhận được lỗi trên. Khi tôi nhận xét ra các dòng phương pháp vi phạm .close vi phạm, nó sau đó đã ném một lỗi về việc không tìm kiếm .browser trong thư viện jquery không được chấp nhận trong jquery 1.8.3 và loại bỏ khỏi jquery 1.9.1. Vì vậy, cơ sở, 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 cho biết nó hoạt động với jquery 1.6+. Về cơ bản, có lỗi không 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 việc tải xuống jqueryui, tôi chắc chắn bạn sẽ ổn, nhưng đó là khi bạn bắt đầu sử dụng các phiên bản khác nhau mà bạn ra khỏi con đường bị đánh đập và nhận được lỗi như thế này. Vì vậy, trong tóm tắt, lỗi này là từ các phiên bản kết hợp sai (trong trường hợp của tôi anyway).

Answer 3

Nếu bạn không thể nâng cấp jQuery và bạn đang 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 xem và biết không có các hộp thoại khác phải ở trong sử dụng ở tất cả 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 thứ là nếu sử dụng closest gây ra vấn đề về hiệu suất. Có thể có nhiều cách khác để làm việc xung quanh nó mà không làm đóng toàn cầu trên tất cả các hộp thoại.

Answer 4

Đâ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(); 

Answer 5

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

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

và nếu bạn mở một Xem phần MVC trong Dialog, bạn có thể tạo trong chỉ số nút ẩn và JQUERY nhấp vào sự kiện:

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

sau đó bên trong phần xem html bạn gọi nút kích hoạt như sau:

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

xem ya.

Answer 6

tôi đã thông báo lỗi này bởi vì tôi đã có thẻ div trên xem một phần thay vì xem mẹ

Answer 7

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 tham số autoOpen để true trong đối tượng tùy chọn của hộp thoại:

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

Vì vậy, bạn không cần phải gọi `$ ("# divDialog") thoại ("mở");.

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