当用户单击链接时,我想填充一个模式对话框并显示它。因此,我使用 AJAX 使用 GET 方法的响应填充此模型对话框,如下所示:
HTML:
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog">
</div>
JavaScript:
$("#dialog-rules").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
$.ajax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
console.log(result);
$("#dialog-rules").html(result);
$("#dialog-rules").dialog("open");
}
});
});
AJAX 调用工作正常,但每当我单击链接时,都会收到此错误:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
at Function.error (VM32 jquery-1.12.4.js:253)
at HTMLDivElement.<anonymous> (VM33 jquery-ui.js:246)
at Function.each (VM32 jquery-1.12.4.js:370)
at jQuery.fn.init.each (VM32 jquery-1.12.4.js:137)
at jQuery.fn.init.$.fn.(anonymous function) [as dialog] (https://code.jquery.com/ui/1.12.1/jquery-ui.js:236:10)
at Object.success (Flights:18216)
at fire (VM32 jquery-1.12.4.js:3232)
at Object.fireWith [as resolveWith] (VM32 jquery-1.12.4.js:3362)
at done (VM32 jquery-1.12.4.js:9840)
at XMLHttpRequest.callback (VM32 jquery-1.12.4.js:10311)
error @ VM32 jquery-1.12.4.js:253
(anonymous) @ VM33 jquery-ui.js:246
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
$.fn.(anonymous function) @ VM33 jquery-ui.js:236
success @ Flights:18216
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
2VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
at init.run (VM32 jquery-1.12.4.js:7402)
at tick (VM32 jquery-1.12.4.js:7747)
at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:95 You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
Hg @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:95
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
google.maps.Load @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:18
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:159
373VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
at init.run (VM32 jquery-1.12.4.js:7402)
at tick (VM32 jquery-1.12.4.js:7747)
at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
maps.googleapis.com/maps/gen_204?target=api&ev=api_alreadyloaded&client=&key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg&cad=src:apiv3,token:4u7gju54e3,ts:nhesob:1 GET http://maps.googleapis.com/maps/gen_204?target=api&ev=api_alreadyloaded&client=&key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg&cad=src:apiv3,token:4u7gju54e3,ts:nhesob 0 ()
Image (async)
LY.b @ stats.js:5
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
Rd @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
Qd.va @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ util.js:1
2334VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
at init.run (VM32 jquery-1.12.4.js:7402)
at tick (VM32 jquery-1.12.4.js:7747)
at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
为什么会发生这种情况以及如何解决它?任何帮助将不胜感激。
最佳答案
发生此错误的原因(如错误本身所述)是您尝试在Dialog Widget之前调用方法。已初始化:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' ...
在下面的代码片段中演示了错误(为了查看实际错误,请打开浏览器的开发者控制台。):
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
$(function() {
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
mockAjax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
console.log(result);
$("#dialog-rules").html(result);
$("#dialog-rules").dialog("open");
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>
注意:
为了演示,使用此 function
模拟 AJAX 调用:
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
导致此错误的可能原因:
-代码结构:
由于完整代码库的实际结构,$.ajax({...});
可能是这样的。调用在 Dialog Widget 实际初始化之前运行,例如:
<script>
的顺序不正确元素-
<script>
具有defer
的元素/async
属性在不同时间加载 - 未注意到的、不正确的 VCS 合并
- 缩小
- 一般拼写错误
确保:
- 所有必要的
<link/>
和<script>
资源放置正确且加载无错误 - 您的代码包含在
$(function() { ... });
中防止代码在 DOM 加载之前运行 检查对话框小部件是否已在元素上初始化,方法是:
if ($("#dialog-rules").dialog && !$("#dialog-rules").dialog("instance")) { console.log("The dialog widget is not initialized on this element"); }
或者在 if
中初始化您的对话框小部件声明:
var element = $("#dialog-rules");
if (element.dialog && !element.dialog("instance")) {
element.dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
或者更好,将初始化分开在它自己的 function
中并在需要时调用它:
function initDialog(element) {
if (element.dialog && !element.dialog("instance")) {
element.dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
}
// ... later in your code ...
initDialog($("#dialog-rules"))
// ...
示例:
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
function initDialog(element) {
if (element.dialog && !element.dialog("instance")) {
console.log("The dialog is not initialized, initialize now");
element.dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
}
$(function() {
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
mockAjax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
var element = $("#dialog-rules");
console.log(result);
initDialog(element);
element.html(result);
element.dialog("open");
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>
- 元素被替换:
万一#dialog-rules
元素被替换,例如:
// ... somewhere/for some reason the element is replaced ...
$("#dialog-rules").remove(); // or .replaceWith(), or .html() on the parent element
$("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
// ...
必须在新的但看似旧元素上重新初始化对话框小部件:
不重新初始化的示例(将引发错误):
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
$(function() {
// The dialog widget is properly initialized on the element
$("#dialog-rules").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
// somewhere/for some reason the element is replaced ...
$("#dialog-rules").remove();
$("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
// ...
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
mockAjax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
console.log(result);
$("#dialog-rules").html(result);
$("#dialog-rules").dialog("open");
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>
重新初始化示例(无错误):
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
function initWidget(element) {
// reinitialize only, when needed
if (element.dialog && !element.dialog("instance")) {
element.dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
}
$(function() {
// The dialog widget is properly initialized on the element
initWidget($("#dialog-rules"));
// somewhere/for some reason the element is replaced ...
$("#dialog-rules").remove();
$("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
// ...
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
mockAjax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
console.log(result);
initWidget($("#dialog-rules"))
$("#dialog-rules").html(result);
$("#dialog-rules").dialog("open");
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>
- 小部件被销毁:
如果小部件被使用 .dialog("destroy")
销毁,例如:
// ... somewhere/for some reason the dialog widget is destroyed ...
$("#dialog-rules").dialog("destroy");
// ...
元素#dialog-rules
返回其预初始化状态。为了再次使用Dialog Widget,需要重新初始化它:
重新初始化示例:
function mockAjax(object) {
console.log('Loaded:', object.url);
object.success('Data as result from AJAX');
}
function initWidget(element) {
// reinitialize only, when needed
if (element.dialog && !element.dialog("instance")) {
element.dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
}
$(function() {
// The dialog widget is properly initialized on the element
initWidget($("#dialog-rules"));
// somewhere/for some reason the dialog widget is destroyed ...
$("#dialog-rules").dialog('destroy');
// ...
$(".checkRulesLink").click(function(e) {
$("#dialog-rules").html("");
e.preventDefault();
var rec = $(this).data('rec');
var seg = $(this).data('seg');
var det = $(this).data('det');
mockAjax({
url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
success: function(result) {
console.log(result);
initWidget($("#dialog-rules"))
$("#dialog-rules").html(result);
$("#dialog-rules").dialog("open");
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>
关于javascript - Uncaught Error : cannot call methods on dialog prior to initialization using jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50955324/