如何从对话框内部重新加载jQuery对话框？

Question

如何从对话框内部重新加载jQuery对话框？

4

我在 jQuery 的 Dialog 中加载了一个页面。完成 ajax 命令后，我希望能够重新加载同一个页面在 jQuery 的 Dialog 中。如何从被加载在 Dialog 中的页面中重新加载 jQuery 的 Dialog？

父页面（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>

对话框内容页面（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>

- Rob

2个回答

2

您可以像这样扩展jQuery中的ui.dialog：

$.ui.dialog.prototype.options.url; // 定义一个新的选项'url'

现在，您可以替换整个对话框“create”以便自动加载url并定义新的“refresh”选项：

    // 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);
            }
        }
    });

您的最终函数应该长这样：

// 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");

您可以在这个fiddle中查看最终代码：http://jsfiddle.net/WLg53/1/

- Phoenix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jrummell · Accepted Answer

你正在将另一个页面的内容加载到当前页面的对话框容器中，因此这里实际上只有一个页面。建议仅从对话框源页面加载部分 HTML（无 <head> 或 <body> 标签）。

所以你可以销毁对话框并重新创建它以重新加载对话框内容：

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 });
}

或者，您可以重新加载整个页面。

window.location.reload();