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 を含めました。キャンセル ボタンのクリック イベントをトリガーする必要があります。ただし、その後、アウト テストでページをリロードしていないことを確認する必要があります。今のところ、その行にコメントしました。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 に答える