0

我正在尝试在 jQuery 对话框中加载“取消”页面。

jQuery 对话框有确认按钮“YES”和“NO”。如果我单击“是”按钮，它应该从jQuery 对话框中加载的页面触发按钮click事件。cancel.aspx

如何从加载的页面调用点击事件？

修改.aspx

<html>
    <div id="dialogCancel" style="display: none;"></div>
    <script type="text/javascript">
        $("#dialogCancel").load('Cancel.aspx').dialog({
            open: function() {
                $(".ui-dialog-titlebar-close").hide();
            },
            width: '300',
            height: '200',
            modal: true,
            draggable: false,
            resizable: false,
            show: {
                effect: 'fade',
                duration: 1500
            },

            buttons: {
                'Yes': function() {
                    //if YES fire button click event from cancel page loaded in jquery dialog.
                    location.reload(true);
                },
                    'No': function() {
                    $(this).dialog('close');
                }
            }
        });
    </script>

</html>

取消.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cancel.aspx.cs" %>
<html>

    <head id="Head1" runat="server">
        <title></title>
        <link href="Scripts/Jquery/themes/dark-hive/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="red">
        <form id="Cancel" runat="server">
            <div id="div1">
                <center>
                    <br />
                    <br />
                    <asp:Button ID="btnCancel" runat="server" Text="Yes" Height="28px" Visible="False" onclick="btnCancel_Click" />
                </center>
            </div>
        </form>
    </body>

</html>
4

1 回答 1

0

首先，您必须修改标记。设置 btnCancel Visible="true"。Visible="false"将停止此控件的渲染。您希望按钮不可见，让我们在 css : 中执行此操作style="display:none"。这是我对 Cancel.aspx 的标记：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cancel.aspx.cs" %>

<html>

    <head id="Head1" runat="server">
        <title></title>
        <link href="Scripts/Jquery/themes/dark-hive/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="red">
        <form id="Cancel" runat="server">
            <div id="div1">
                <center>
                    <br />
                    <br />
                    <asp:Button ID="btnCancel" runat="server" Text="Yes" Height="28px" Visible="true" onclick="btnCancel_Click" style="display:none;"/>
                </center>
            </div>
        </form>
    </body>

</html>

现在在脚本中我们需要进行一些更改。我已经包含了 jquery 和 jquery ui。我们需要触发取消按钮的点击事件。但在那之后，我们需要确保我们没有在 out 测试中重新加载页面。我现在已经评论了这条线。这是使用 jquery 的 Modify.aspx 的标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/jquery-ui-1.8.24.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="dialogCancel" style="display: none;"></div>
    <script type="text/javascript">
        $("#dialogCancel").load('Cancel.aspx').dialog({
            open: function () {
                $(".ui-dialog-titlebar-close").hide();
            },
            width: '300',
            height: '200',
            modal: true,
            draggable: false,
            resizable: false,
            show: {
                effect: 'fade',
                duration: 1500
            },

            buttons: {
                'Yes': function () {
                    //if YES fire button click event from cancel page loaded in jquery dialog.
                    $("#btnCancel").trigger("click");
                    //location.reload(true);//Uncomment this line once you are done with testing
                },
                'No': function () {
                    $(this).dialog('close');
                }
            }
        });
    </script>

    </div>
    </form>
</body>
</html>
于 2013-08-12T02:34:25.140 回答