简体   繁体   English

ASP.NET回发后关闭jQuery Modal对话框再次将其打开

[英]Closing jQuery Modal dialog after ASP.NET postback opens it again

I have an HTML link that opens a jQuery modal dialog which contains an iFrame. 我有一个HTML链接,可打开一个包含iFrame的jQuery模式对话框。 This iFrame contains a form that should close dialog after postback ( Ok or Cancel ). 此iFrame包含一个表单,该表单应在回发后关闭对话框( OkCancel )。

In my postback I add a Javascript function to iFrame that closes the dialog and it works fine. 在我的回发中,我向iFrame添加了Javascript函数,该函数关闭了对话框,并且效果很好。 However problem is, after user presses Ok or Cancel button, dialog closes and opens again! 但是问题是,在用户按下“ Ok或“ Cancel按钮后,对话框关闭并再次打开! What am I doing wrong? 我究竟做错了什么?

Here is my code: 这是我的代码:

Calling HTML page: 调用HTML页面:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="theme/south-street.css" media="screen" id="themeCSS" />

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dlgConfirm").dialog({
                autoOpen: false,
                resizable: false,
                modal: true,
                width: 550,
                height: 300,
                close: function (event, ui) { alert('closed') }
            })
        });


        function fConfirm(tId) {
            alert('ddd');
            $('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
            .load(function () {
                $("#dlgConfirm").dialog('open');
            });
            return false;
        }
    </script>
</head>
<body>
    <div style="display: none">
        <div id="dlgConfirm" title="Confirm Tracking" style="padding: 0px">
            <iframe style="margin: 0px; padding: 0px" marginheight="0" marginwidth="0" src="" width="100%" height="100%" frameborder="0"></iframe>
        </div>
    </div>

    <a href="#" onclick="return fConfirm('109')">Click me</a>
</body>
</html>

iFrame Page iFrame页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmTracking.aspx.cs" Inherits="Chicken.ConfirmTracking" %>
<html>
<head runat="server">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
        function CloseThis() {
            parent.$('#dlgConfirm').dialog('close');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <br />
        <asp:TextBox ID="edtTrackingNo" runat="server"></asp:TextBox>
        <br /><br />
    <asp:Button ID="btnOk" runat="server" Text="Ok" />
    <asp:Button ID="btnCancel" runat="server" onclick="Cancel_Click" Text="Cancel" />
    </form>
</body>
</html>

iFrame Codebehind: iFrame代码背后:

using System;

namespace Chicken {
    public partial class ConfirmTracking: System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void Cancel_Click(object sender, EventArgs e) {
            ClientScript.RegisterClientScriptBlock(this.GetType(), "none", "<script>$(function(){CloseThis()});</script>");
        }
    }
}

I managed to trace your problem, the load in function fConfirm(tId) triggers again after closing your dialog. 我设法跟踪了您的问题,在关闭对话框后, function fConfirm(tId)的加载再次触发。 It seems to be a bug. 这似乎是一个错误。 A messy way to fix this is adding a global variable to your page and set it to true to show that dialog is opened via function then before opening your dialog if the variable is true open the dialog. 解决此问题的一种麻烦方法是在页面上添加一个全局变量,并将其设置为true,以表明该对话框是通过函数打开的,如果变量为true,则在打开对话框之前打开对话框。 don't foget to set your variable to false again so you can re-open dialog if it is needed. 不要再将变量设置为false了,这样就可以在需要时重新打开对话框。

your function will look like below: 您的函数将如下所示:

    var loadedByFunction = false;

    function fConfirm(tId) {
        loadedByFunction = true;
        $('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
        .load(function () {
            if (loadedByFunction) {
                loadedByFunction = false;
                $("#dlgConfirm").dialog('open');
            }
        });
        return false;
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM