質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16440questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ASP.NET

    529questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • Windows 7

    371questions

    Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

  • Internet Explorer 8

    13questions

    Windows Internet Explorer 8は、マイクロソフトによって開発されたウェブブラウザで、2009年の3月19日に、Windows XP、Windows Server 2003、Windows Vista、Windows Server 2008、そしてWindows 7に組み込まれました。

javascriptで開いた子画面を「キャンセル」ボタンで閉じた場合に、親画面の処理を止めたい。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,089

meesa

score 4

 前提・実現したいこと

お世話になります。自分でも調べてみたのですが、どうにも上手くいかなかったので、質問させてください。

ASP.NETでWEBアプリを開発しています。
親画面と、コメントを入力させるための子画面の、2つの画面があります。
親画面で「コメント入力」ボタンをクリックしたとき、javascriptで子画面をモーダル表示させています。
子画面には、コメント入力用のテキストボックスと、「登録」「キャンセル」の2つのボタンがあり、「登録」ボタンが押された場合は親画面にテキストボックスの値を渡して画面を閉じます。
親画面では、子画面で入力したコメントを受け取り、DBへ登録処理を行います。このDB登録処理は、親画面の「コメント入力」ボタンクリックイベントで処理しています。
「キャンセル」ボタンが押された場合は登録処理を行わず(=親画面の「コメント入力」ボタンクリックイベントを発生させず)、ただ子画面を閉じるのみの動きをさせたいです。

 発生している問題・エラーメッセージ

キャンセルボタンを押したときも、「コメント入力」ボタンクリックイベントが発生し、DBへの登録処理が行われてしまいます。

なお、挙動としては、「キャンセル」ボタンクリック → 一度画面が閉じる? → 同じ画面が開きなおす、という変な動きも発生しています。
ちなみにこの開き直す挙動は、「登録」ボタンをクリックした場合にも発生しています。
なので、今のところ「キャンセル」と「登録」の違いが、DBにテキストボックスの値が登録されるか、されないか、というところのみになっています。
この動き自体もおかしいので、調べているのですが、似たような状況の資料が見付けられず、対策が分かりません……。

「キャンセル」ボタンクリック時、Visual Studioでデバッグした際の動きを見る限り、javascriptのIF分岐は、意図したとおりに「return false;」を通過しています。
「return false;」を入れることでクライアントでエラーを発生させ、サーバーに処理を投げなくなり、ボタンクリックイベントを停止させることが出来る、という理解をしているのですが、そうではないのでしょうか?

 該当のソースコード

親画面

function ClickCommentButton() {
    var demno = document.getElementById("lbl_DemNo").innerText;
    var url = 'Comment.aspx?btn=input&demno=' + demno;
    var rtn = window.showModalDialog(url, "_blank", "dialogHeight:250px; dialogWidth:600px;");
    if (rtn === void 0) {
        return false;
    } else {
        document.getElementById("hid_Comment").value = rtn;
        return true;
    }
}
<form id="form1" runat="server">
    <div id="main">
        <h1>申請内容</h1>
        <div class="DemInfo">
            状況:<asp:Label ID="lbl_Status" runat="server" Text="作成中"></asp:Label>
                <asp:HiddenField ID="hid_StatusCD" runat="server" Value="0" />

            <label class="wid80">申請管理No.</label>
            <asp:Label ID="lbl_DemNo" runat="server" Text="未設定" class="clearLeft"></asp:Label>
            <asp:HiddenField ID="hid_Comment" runat="server" />
        </div>
        <div class="DemButton">
            <asp:Button ID="btn_Cancel" runat="server" Text="キャンセル" class="btn_Middle" 
                onclientclick="window.close()" />
            <asp:Button ID="btn_comment" runat="server" Text="コメント入力" 
                class="btn_Learge" onclientclick="ClickCommentButton()" />
            <asp:Button ID="btn_OK" runat="server" Text="更新" class="btn_Middle" />
        </div>
    </div>
</form>
Protected Sub btn_Comment_Click(sender As Object, e As EventArgs) Handles btn_comment.Click
        Dim Comment As New String = ""
        Dim M01 As New M01_GetData

        'コメントを取得
        Comment = hid_Comment.Value

        'コメントDB登録(コメントと更新日時をDB登録している)
        If M01.UpdateComment(Comment) = True Then
            '正常終了の場合画面を再表示
            SetDemInfo(Session("UserID"), DI.DemNo)
        End If
    End Sub

子画面

function ReturnComment() {
  //テキストボックスに入力されたコメントを返す
    window.returnValue = document.getElementById("txtb_Comment").value;
    window.close();
}

function CancelButtonClick() {
    window.close();
}
<form id="form1" runat="server">
    <h1>NGコメント</h1>
    <div>
        <asp:Label ID="lbl_Msg" runat="server" Text="コメントを入力してください。"></asp:Label>
    </div>
    <div class="btm-margin">
        <asp:TextBox ID="txtb_Comment" runat="server"
            Rows="4" TextMode="MultiLine" Width="400px"></asp:TextBox>
    </div>
    <div class="btm-margin">
        <asp:Button ID="btn_Cancel" runat="server" Text="キャンセル"
            CssClass="btn_Middle" OnClientClick="CancelButtonClick();" />
        <asp:Button ID="btn_RetComment" runat="server" Text="登録"
            CausesValidation="True" CssClass="btn_Learge" 
            OnClientClick="ReturnComment();" />
    </div>
</form>

 試したこと

このサイトを参考にしています。
http://office-yone.com/blog/postback/

 補足情報(FW/ツールのバージョンなど)

asp.net 4.0 / Visual Studio 2010 / Internte Exploler 8, 11
※社内システムにつき、古い環境で稼動させる必要があり苦労しております・・・・・・

不明点があればご指摘ください。よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/01/26 16:35

    親画面側のHTML(aspx)を追記すべきかと思われます.

    キャンセル

  • meesa

    2018/01/26 16:44

    お手数おかけしてすみません。親画面側のHTMLコードを追記しました。

    キャンセル

  • defghi1977

    2018/01/26 17:02

    あと, (可能であれば)タグに「windows」とか「internet explorer」等を追加したほうが判りやすいかもしれません. (質問をしたことがないので出来るかわからない)

    キャンセル

  • meesa

    2018/01/26 17:05

    ご指摘ありがとうございます。動作環境のタグを追加しました。

    キャンセル

回答 3

+2

showModalDialogは廃止になったはずです。
それを前提とした質問であれば使用を停止して下さいとしか・・・

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/26 16:31

    前提がIE限定なので, これでよろしかろうと.

    キャンセル

  • 2018/01/26 16:35

    な、なんと、、、浅学ながら知りませんでした。
    そうなると、window.openで開くのが一番確実なのでしょうか。

    キャンセル

  • 2018/01/26 16:46

    > window.openで開くのが一番確実

    別ウィンドウを開きたいならそうなりますね
    ただ子ウィンドウは裏にはっちゃうこともあるので微妙です。
    各種ライブラリのなかには疑似モーダル処理がいくつか公開されているので
    それを利用するのが手っ取り早いと思います
    本来であればdialogタグがその役目を担うはずなんですが
    まだ使い勝手がよいとはいえません

    キャンセル

  • 2018/01/26 16:55

    >yamabejp様
    回答ありがとうございます。
    初歩的な質問で大変申し訳ありませんが、「各種ライブラリ」とは、どういったものでしょうか?
    詳しく教えていただけますと大変助かります。

    キャンセル

  • 2018/01/26 18:14

    横レス失礼します。

    showModalDialog など使うのは例え IE 限定であっても避けるべきです。showModalDialog 問題 などをキーワードにググってみてください。(そんなの使うのは豆腐の角に・・・という過激な意見もあるようです)

    ASP.NET Web Forms アプリのようですが、であれば、Ajax Control Toolkit の ModalPopupExtender の利用を検討してみてください。

    他には、jQuery UI の Dialog 等もあります。

    キャンセル

  • 2018/01/26 18:37

    jQueryと違ってjQuery UIはメニューにバグがあったりしてそれほど信用できないんですよね。最新の1.12.*はIE11までなので論外で、古いバージョンのものを使わなければなりませんが、IE8はどれを使えばいいんでしょう。

    キャンセル

  • 2018/01/26 21:02

    IE8 はすでに試せる環境を持ってないので分かりません。IE9 なら 1.8.16 で対応可能というのは昔確認しましたが・・・ デモを IE8 で試してダメでしたか?

    キャンセル

  • 2018/01/26 21:05

    そういう検証も含め、沼にはまりそうです。確かスクロール中のダイアログにも座標計算を間違えるバグがあったはず。放置されてバージョン上がっていきましたが

    キャンセル

  • 2018/01/26 21:15

    それでも showModalDialog でハマるよりはりかによさそうな気がします。サーバーコントロール、ViewState、ポストバックというテクニックを使う ASP.NET Web Forms アプリですから、同一ページ内で全ての処理ができるように Ajax Control Toolkit の ModalPopupExtender や jQuery UI の Dialog を使うことには大きなメリットがあると思います。

    キャンセル

+2

OnClientClick="return ClickCommentButton();"


ほかも同じように書いたほうがいいでしょう。

方法 : クライアント スクリプトで Button Web サーバー コントロール イベントに応答する
https://msdn.microsoft.com/ja-jp/library/ms227426(v=vs.100).aspx

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/26 17:10

    回答ありがとうございます!おっしゃるとおり、returnを追加したところ意図したとおりに動きました。
    お二方にベストアンサーを付けたかったのですが、仕組み上付けられず・・・大変申し訳ありませんが、僅差で先に回答頂いたdefghi1977さんをベストアンサーとさせていただきました。

    キャンセル

checkベストアンサー

+1

以下は動作を確認していません. また回答者はASP.netをほとんど忘れています.


returnが抜けている可能性があります.

<!--ASP.net-->
        <div class="DemButton">
            <asp:Button ID="btn_Cancel" runat="server" Text="キャンセル" class="btn_Middle" 
                onclientclick="window.close()" />
            <asp:Button ID="btn_comment" runat="server" Text="コメント入力" 
                class="btn_Learge" onclientclick="return ClickCommentButton();" /><!--←-->
            <asp:Button ID="btn_OK" runat="server" Text="更新" class="btn_Middle" />
        </div>

参考
Stop Postback on Button OnClientClick()
また, 提示の参考ページにおいてもreturn falseの記述があります.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/26 17:08

    おっしゃるとおり、returnを追加したところ意図したとおりに動きました!
    こんなに早く解決するとは思いませんでした。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16440questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ASP.NET

    529questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • Windows 7

    371questions

    Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

  • Internet Explorer 8

    13questions

    Windows Internet Explorer 8は、マイクロソフトによって開発されたウェブブラウザで、2009年の3月19日に、Windows XP、Windows Server 2003、Windows Vista、Windows Server 2008、そしてWindows 7に組み込まれました。