Javascript 如何从对话框中重新加载 jQuery 对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10388786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I reload a jQuery dialog box from within the dialog?
提问by Rob
I load a page within a jQuery Dialog. After an ajax command is completed, I would like to be able to reload the same page within the jQuery Dialog. How can I reload a jQuery Dialogfrom within the page that is loaded in the Dialog?
我在 jQuery 中加载一个页面Dialog。ajax 命令完成后，我希望能够在 jQuery 中重新加载同一页面Dialog。如何Dialog从加载到的页面中重新加载 jQuery Dialog？
Parent Page (Blah.aspx):
父页面 (Blah.aspx)：
<script type="text/javascript">
function view_dialog() {
$('#dialog').load('blah2.aspx').dialog({
title: 'test' ,
modal: 'true',
width: '80%',
height: '740',
position: 'center',
show: 'scale',
hide: 'scale',
cache: false });
}
</script>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<input id="Button1" onclick="view_dialog()" type="button" value="button" />
<div id="dialog" style="display: none"></div>
</asp:Content>
Dialog contents page (blah2.aspx):
对话框内容页面（blah2.aspx）：
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(document).ready(function() {
function doit() {
var request = $.ajax({
url: "someurl",
dataType: "JSON",
data: {
a: 'somevalue'
}
});
request.done(function () {
//refresh the current dialog by calling blah2.aspx again
});
}
</script>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<input id="Button1" onclick="doit()" type="button" value="button" />
</asp:Content>
回答by jrummell
You are loading content from another page into the dialog container in the current page, so there is really only one page in play here. I would recommend only loading partial html (no <head>or <body>tags) from your dialog source page.
您正在将另一个页面的内容加载到当前页面的对话框容器中，因此这里实际上只有一个页面在运行。我建议只从您的对话框源页面加载部分 html（无<head>或<body>标签）。
So you can either destroy the dialog and recreate it to reload the dialog content:
因此，您可以销毁对话框并重新创建它以重新加载对话框内容：
function reload_dialog()
{
$('#dialog').dialog('destroy');
view_dialog();
}
function view_dialog() {
$('#dialog').load('blah2.aspx').dialog({
title: 'test' ,
modal: 'true',
width: '80%',
height: '740',
position: 'center',
show: 'scale',
hide: 'scale',
cache: false });
}
Or, you can reload the entire page.
或者，您可以重新加载整个页面。
window.location.reload();
回答by Phoenix
You can extend the ui.dialog in jQuery like this:
您可以像这样在 jQuery 中扩展 ui.dialog：
$.ui.dialog.prototype.options.url; // Define a new option 'url'
$.ui.dialog.prototype.options.url; // Define a new option 'url'
Now, you can replace the entire dialog "create" so it loads the url automatically and define the new "refresh" option:
现在，您可以替换整个对话框“创建”，以便它自动加载 url 并定义新的“刷新”选项：
// Replace the _create event
var orig_create = $.ui.dialog.prototype._create;
$.ui.dialog.prototype._create = function(){
orig_create.apply(this,arguments);
var self = this;
if(this.options.url!=''){
self.element.load(self.options.url); // auto load the url selected
};
};
$.widget( "ui.dialog", $.ui.dialog, {
refresh: function() {
if(this.options.url!=''){
this.element.load(this.options.url);
}
}
});
Your final function would look like this:
您的最终函数如下所示：
// Note the "url" option.
function view_dialog() {
$('#dialog').dialog({
url:'blah2.aspx',
title: 'test' ,
modal: 'true',
width: '80%',
height: '740',
position: 'center',
show: 'scale',
hide: 'scale',
cache: false });
}
// refresh:
$('#dialog').dialog("refresh");
You can see the final code in this fiddle: http://jsfiddle.net/WLg53/1/
你可以在这个小提琴中看到最终的代码：http: //jsfiddle.net/WLg53/1/
