admin管理员组文章数量:1415645
Following code is a pretty simple and plete JQuery Dialog. Everything works.
Problem is as mentioned at the title in js1.js: (see its ment)
It always try to load the page by calling horsedlgcontainer.load('page2.html'); never hits the else horsedlg.dialog('open'); statement.
Any idea please? Thank you very much!
page1.html ...
<!DOCTYPE html>
<head>
<link href="Site.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="js1.js" type="text/javascript"></script>
</head>
<body>
<div id="horse-link">
[<a id="horse-link-show-dialog">Click Me</a>]
</div>
<div id="horse-link-dialog-container"></div>
</body>
page2.html ...
<script src="js2.js" type="text/javascript"></script>
<div id="horse-dialog" title="Horse!">
Q: When is a horse not a horse?<br />
A: It depends, when a white horse is not a horse.<br />
</div>
js1.js ...
$(document).ready(function () {
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never e here?!?
}
});
js2.js ...
$(document).ready(function () {
var horsedlg = $('#horse-dialog'),
horselnk = $('#horse-link');
horsedlg.dialog({
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
});
});
Following code is a pretty simple and plete JQuery Dialog. Everything works.
Problem is as mentioned at the title in js1.js: (see its ment)
It always try to load the page by calling horsedlgcontainer.load('page2.html'); never hits the else horsedlg.dialog('open'); statement.
Any idea please? Thank you very much!
page1.html ...
<!DOCTYPE html>
<head>
<link href="Site.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="js1.js" type="text/javascript"></script>
</head>
<body>
<div id="horse-link">
[<a id="horse-link-show-dialog">Click Me</a>]
</div>
<div id="horse-link-dialog-container"></div>
</body>
page2.html ...
<script src="js2.js" type="text/javascript"></script>
<div id="horse-dialog" title="Horse!">
Q: When is a horse not a horse?<br />
A: It depends, when a white horse is not a horse.<br />
</div>
js1.js ...
$(document).ready(function () {
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never e here?!?
}
});
js2.js ...
$(document).ready(function () {
var horsedlg = $('#horse-dialog'),
horselnk = $('#horse-link');
horsedlg.dialog({
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
});
});
3 Answers
Reset to default 3You're only evaluating horsedlg = $('#horse-dialog') once, and it's before the content is loaded, so its .length property is always zero.
I suspect you'll also run into problems with loading a secondary JS file when you load the dialog content. A single JS file would be cleaner:
$(document).ready(function () {
var options = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var loaded = $.Deferred();
$('#horse-link-show-dialog').on('click', function() {
var state = loaded.state();
if (state === 'resolved') {
$('#horse-dialog').dialog('open');
} else if (state === 'pending') {
// do nothing
} else {
$('#horse-link-dialog-container').load('page2.html')
.fail(loaded.reject);
.done(function() {
$('#horse-dialog').dialog(options);
loaded.resolve();
});
});
}
});
});
This uses a jQuery deferred object to indicate whether the dialog box has finished loading or not.
NB: code untested - jsfiddle isn't good for testing AJAX.
As metnioned by @Alnitak the issue is you are trying to search for #horse-dialog even before the element is available in the dom..in your case it will be available after the page2.html load.
Tweak your code to as below and you can do away with js2.js:
$(document).ready(function () {
var horsedlgOptions = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
horsedlg = horsedlgcontainer.find("#horse-dialog");
horsedlg.dialog(horsedlgOptions);
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open');
}
});
The variable horsedlg is locally defined within the first $(document).ready function - so when that code is executed horsedlg.length equals 0 as the DOM element with the id of horse-dialog isnt present on the page.
You cannot change that locally defined variable - so the length always equals 0.
You could do this instead :
function showHorseDialog() {
var horsedlg = $('#horse-dialog');
if (horsedlg.length == 0) {
horsedlgcontainer.load('page2.html');
} else { //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never e here?!?
}
}
本文标签： javascriptJQuery Dialog() can39t open again after closeStack Overflow
版权声明：本文标题：javascript - JQuery Dialog() can't open again after close - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745242031a2649385.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论