QA@IT

ASP.NETとjQueryでモーダルダイアログが消えてしまう。

7793 PV

おはようございます。質問させていただきます。
ASP.NET VB2015です。
JQueryで作ったDialog(確認ダイアログ)が呼び出し元(WebFormTest.aspx)のボタン(Button1)をクリックして一瞬見えますがすぐ消えてしまいます。
原因がわからないのでアドバイスお願いします。

jquery-ui-1.8.4.custom.css jquery-ui-1.8.4.custom.min.js jquery-ui-1.8.4.custom.min.jsはそのままです。

test.master.vb

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="test.master.vb" Inherits="Newvideoweb.test" %>
<!DOCTYPE html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" href="Content/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="Scripts/TestDialog.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    <div id="show_dialog">
    </div>
    </form>
</body>
</html>

WebFormTest.aspx(スタートページ)

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/test.Master" CodeBehind="WebFormTest.aspx.vb" Inherits="Newvideoweb.WebFormTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="JConfirmDialog();"  />
</asp:Content>
Scripts/TestDialog.js
// 確認ダイアログの表示
function JConfirmDialog() {
    var strTitle = "確認ダイアログ";
    var strComment = "これは確認ダイアログです。";

    // ダイアログのメッセージを設定
    $("#show_dialog").html(strComment);

    // ダイアログを作成
    $("#show_dialog").dialog({
        modal: true,
        title: strTitle,
        zindex: 999,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                JMeesageDialog("OKがクリックされました");
            },
            "キャンセル": function () {
                $(this).dialog("close");
                JMeesageDialog("キャンセルがクリックされました");
            }
        }
    });
}
// メッセージダイアログの表示(JQuery)
function JMeesageDialog(strComment) {
    var strTitle = "メッセージダイアログ";

    // ダイアログのメッセージを設定
    $("#show_dialog").html(strComment);

    // ダイアログを作成
    $("#show_dialog").dialog({
        modal: true,
        title: strTitle,
        buttons: {
        }
    });
}

以上、よろしくお願いします。

  • コードは ``` と ``` で囲ってください(''' ではなくて) -

回答

SurferOnWww様
教えていただいたアドバイスを基に修正したら
消えずに表示されております。

WebFormTest.aspx(スタートページ)

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/test.Master" CodeBehind="WebFormTest.aspx.vb" Inherits="Newvideoweb.WebFormTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<%-- 修正前 --%>
<%-- <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="JConfirmDialog();"  /> --%>

<%-- 修正後 --%>
<input id="Button1" type="button" value="button" onclick="JConfirmDialog();" />

</asp:Content>

ありがとうございました。

別途、次段階の質問がありますが、いったんここはここでクローズします。

編集 履歴 (0)

ボタン(Button1)をクリックして一瞬見えますがすぐ消えてしまいます。

コードが見えないので想像ですが、その Button1 というのは ASP.NET Web Forms アプリ用の Button コントロールですか?

そして、その OnClientClick プロパティに jQuery UI の dialog を開くスクリプトを設定(または、クライアントスクリプトで $('#Button1').click(function () ... のように設定)したのでしょうか?

そうだとすると、[Button1] クリックで、まず dialog を開くスクリプトが動いて dialog が表示され、その後ポストパックがかかってブラウザ上の画面が再描画され、dialog が表示されない状態に戻ってしまったということではないかと思われます。

Button コントロールではなくて、ポストバックしない(submit しない)タイプのボタンを使って試してみてはいかがですか?

実装の具体例は、dialog を表示する以外にちょっと余計なコードが入ってますが、以下の記事を見てください。

textarea のキャレット位置に文字列を挿入
http://surferonwww.info/BlogEngine/post/2012/01/09/Inserting-string-at-caret-position-in-textarea.aspx

編集 履歴 (0)
  • SurferOnWww様
    確認がおそくなりました。
    Buttonコントロールがポストバックさせているのですね。

    教えていただいた内容を基に
    一度修正してみます。

    一旦挨拶とさせていただきますが、今後見ていただくために、直したら再度書き込みます。
    ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。