Question

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

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

如何从已加载的页面调用click事件？

Modify.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>

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="False" onclick="btnCancel_Click" />
                </center>
            </div>
        </form>
    </body>

</html>

Answer 1

首先，您必须修改标记。设置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。我们需要触发取消按钮的点击事件。但之后我们需要确保我们没有在测试中重新加载页面。我现在评论了这条线。这是使用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>

从jquery对话框中加载的页面按钮单击事件

1 个答案: