Lỗi: LoạiError: $ (...) .hộp thoại không phải là một chức năng

Question

Tôi gặp sự cố khi nhận một hộp thoại hoạt động như chức năng cơ bản. Đây là jQuery nguồn nhập khẩu của tôi:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script> 
<script type="text/javascript" src="scripts/json.debug.js"></script> 

Html:

<button id="opener">open the dialog</button> 
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div> 

<script type="text/javascript"> 
    $("#opener").click(function() { 
      $("#dialog1").dialog('open'); 
    }); 
</script> 

Từ bài viết xung quanh có vẻ như là một vấn đề nhập viện. Tôi đã tải xuống các phụ thuộc của giao diện người dùng, phụ tùng, chuột và vị trí của JQuery UI.

Bất kỳ ý tưởng nào?

Answer 1

Đảm bảo chèn phiên bản đầy đủ của giao diện người dùng jQuery. Ngoài ra bạn nên init hộp thoại đầu tiên:

$(function() { 
 
    $("#dialog1").dialog({ 
 
    autoOpen: false 
 
    }); 
 
    
 
    $("#opener").click(function() { 
 
    $("#dialog1").dialog('open'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 

 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> 
 

 
<button id="opener">open the dialog</button> 
 
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

Answer 2

Nếu bạn nhận xét ra đoạn mã sau từ trang _Layout.cshtml, các phương thức popup sẽ bắt đầu làm việc:

</footer> 

    @*@Scripts.Render("~/bundles/jquery")*@ 
    @RenderSection("scripts", required: false) 
    </body> 
</html> 

Answer 3

nếu vì lý do nào hai phiên bản của jQuery được nạp (không được khuyến nghị), gọi $ .noConflict (true) từ phiên bản thứ hai sẽ trả về các biến jQuery trên phạm vi toàn cầu cho các phiên bản đầu tiên.

Một số lần nó có thể là vấn đề với phiên bản cũ (hay không phiên bản ổn định) của file JQuery

sử dụng Giải pháp $ .noConflict();

<script src="other_lib.js"></script> 
<script src="jquery.js"></script> 
<script> 
$.noConflict(); 
jQuery(document).ready(function($) { 
    $("#opener").click(function() { 
      $("#dialog1").dialog('open'); 
    }); 
}); 
// Code that uses other library's $ can follow here. 
</script> 

Answer 4

Tôi chỉ có kinh nghiệm này với các dòng:

$('<div id="editor" />').dialogelfinder({ 

Tôi đã nhận lỗi "dialogelfinder không phải là một chức năng" vì thành phần khác được chèn một cuộc gọi để tải phiên bản cũ của JQuery (1.7. 2) sau khi phiên bản mới hơn được tải.

Ngay sau khi tôi nhận xét tải thứ hai, lỗi đã biến mất.

Answer 5

Dưới đây là danh sách đầy đủ các tập lệnh được yêu cầu để loại bỏ vấn đề này. (Đảm bảo rằng tệp tồn tại ở đường dẫn tập tin được)

<script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript"> 
    </script> 
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"> 
    </script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> 
    </script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"> 
    </script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"> 
    </script> 

và cũng bao gồm các bên dưới liên kết css trong _Layout.cshtml cho một phong cách popup.

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" /> 

Answer 6

Tôi gặp sự cố tương tự và trong trường hợp của tôi, vấn đề khác (tôi đang sử dụng mẫu Django).

Thứ tự của JS không chính xác (tôi biết đó là điều đầu tiên bạn kiểm tra nhưng tôi gần như chắc chắn rằng đó không phải là trường hợp, nhưng nó đã được). Các js gọi hộp thoại được gọi trước khi thư viện jqueryUI được gọi.

Tôi đang sử dụng Django, do đó đã kế thừa mẫu và sử dụng {{super.block}} để kế thừa mã từ khối cũng như mẫu. Tôi đã phải di chuyển {{super.block}} ở cuối khối đã giải quyết được vấn đề. Các js gọi hộp thoại đã được tuyên bố trong lớp Media trong admin.py của Django. Tôi đã dành hơn một giờ để tìm ra. Hy vọng điều này sẽ giúp một ai đó.