none
確認メッセージでの「はい」、「いいえ」、「キャンセル」ボタンの実装について RRS feed

  • 質問

  • VB.Netを用いてWebページの開発をしています。(VB.Net2013、IE11.0、.NetFramework4.5.2、IIS7.5)

    ある画面で、編集中の項目を更新するか、破棄するか、もしくはキャンセルを行いたいため、

    下記のようなイメージで確認画面(はい、いいえ、キャンセルの3つのボタンがある)を表示させたい

    のですが、IE11では、VBScriptをサポートしないため、エラーとなり動作しません。

    回避策としては、 <meta http-equiv="x-ua-compatible" content="IE=10">を入れることで、

    確かに動作はするのですが、上記タグを入れずに何とか対応できないかと調査を行っています。

    (理由:上記対応は、一時的なソリューションとして考える必要があるというような記載があり、今後どうなるか不明なため)

    可能なのは、jqueryのdialogを利用するか、自前の子画面を作成してしまうことかなとも思うのですが、

    他に下記のような実装イメージを生かす、もしくは類似するようなことがjavascriptでできないものなのでしょうか。

    もしご存じの方が、いらっしゃいましたら、ご教示ください。よろしくお願いいたします。

    <html>
    <head>
        <script language="VBScript">

            Function msgboxOrg()

            msgboxOrg = MsgBox("~~~があります。編集内容を更新しますか?破棄しますか?", vbYesNoCancel + vbQuestion, "確認")
            End Function
        </script>
        <script language="javascript">
            function test(){
                var ret = msgboxOrg();
                if(6 == ret){
                    alert("[はい]が押されました");
                }else if(7 == ret){
                    alert("[いいえ]が押されました");
                }
                else
                {
                    alert("[キャンセル]が押されました");
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="msgbox test" onclick="javascript:test();" />
    </body>
    </html>

    2015年9月14日 11:22

回答

  • 質問者さんは興味がなさそうですがそれは置いといて、jQuery UI の DIalog を使ってほぼ同等な機能を実装したサンプルをアップしておきます。

    同等と言っても、VBScript の MsgBox と違って完全にモーダルにはならない(IE 本体は操作できてしまう)点は何ともならないですが。

    上が jQuery UI Dialog、下が質問者さんのコードそのものの VBScript の MsgBox となっています。

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
        <link href="/css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        //<![CDATA[
            var isButtonClicked;
    
            $(function () {
                $("#dialog").dialog({
                    bgiframe: true,
                    autoOpen: false,
                    modal: true,
                    resizable: false,
                    buttons: {
                        'はい': function () {
                            isButtonClicked = true;
                            $(this).dialog('close');
                            alert("[はい]が押されました");
                        },
                        'いいえ': function () {
                            isButtonClicked = true;
                            $(this).dialog('close');
                            alert("[いいえ]が押されました");
                        },
                        'キャンセル': function () {
                            isButtonClicked = true
                            $(this).dialog('close');
                            alert("[キャンセル]が押されました");
                        }
                    },
                    open: function () {
                        isButtonClicked = false;
                    },
                    close: function () {
                        if (isButtonClicked == false) {
                            alert("[キャンセル]が押されました");
                        }
                    }
                });
    
                $('#buttonShowDialog').click(function () {                
                    $('#dialog').dialog('open');
                });
            });
        //]]>
        </script>
    
        <script type="text/vbscript" language="VBScript"> 
            Function msgboxOrg() 
                msgboxOrg = MsgBox("~~~があります。編集内容を更新しますか?破棄しますか?", vbYesNoCancel + vbQuestion, "確認")
            End Function
        </script>
    
        <script type="text/javascript" language="javascript">
            function test() {
                var ret = msgboxOrg();
                if (6 == ret) {
                    alert("[はい]が押されました");
                } else if (7 == ret) {
                    alert("[いいえ]が押されました");
                }
                else {
                    alert("[キャンセル]が押されました");
                }
            }
        </script>
    
    </head>
    <body style="font-size: 12px;">
        <form id="form1" runat="server">
        
            <h2>jQuery UI の Dialog</h2>
            <input type="button" id="buttonShowDialog" value="ダイアログ表示" />
    
            <div id="dialog" title="確認">
                <p>~~~があります。編集内容を更新しますか?破棄しますか?</p>
            </div>
    
            <hr />
            
            <h2>VBScript の MsgBox</h2>
            <input type="button" value="msgbox test" onclick="javascript:test();" />
        
        </form>
    </body>
    </html>
    

    • 回答としてマーク takusan 2015年10月2日 4:27
    2015年9月21日 1:36

すべての返信

  • HTML5標準のwindow.conform()を使用されることをお勧めします。

    OK / Cancelとなる点と戻り値がtrue / falseになる程度でしょうか。

    2015年9月14日 12:15
  • コメントありがとうございます。

    この場合、OK、Cancelの2つしかボタンが表示されないです。

    3つボタンを配置したいのですが、良い方法がないでしょうか。

    2015年9月14日 12:23
  • > 可能なのは、jqueryのdialogを利用するか、

    何故それを使わないのですか? 

    jQuery Dialog を使うのがイヤなら Ajax Control Toolkit の ModalPopup を使うという手もあります。

    そういう既存のものを使わないで何とかしようと言うという理由が分かりませんけど。

    100% 自力で何とかしたいということではないですよね? 理由を教えていただけませんか?

    2015年9月14日 12:52
  • 質問者さんは興味がなさそうですがそれは置いといて、jQuery UI の DIalog を使ってほぼ同等な機能を実装したサンプルをアップしておきます。

    同等と言っても、VBScript の MsgBox と違って完全にモーダルにはならない(IE 本体は操作できてしまう)点は何ともならないですが。

    上が jQuery UI Dialog、下が質問者さんのコードそのものの VBScript の MsgBox となっています。

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
        <link href="/css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        //<![CDATA[
            var isButtonClicked;
    
            $(function () {
                $("#dialog").dialog({
                    bgiframe: true,
                    autoOpen: false,
                    modal: true,
                    resizable: false,
                    buttons: {
                        'はい': function () {
                            isButtonClicked = true;
                            $(this).dialog('close');
                            alert("[はい]が押されました");
                        },
                        'いいえ': function () {
                            isButtonClicked = true;
                            $(this).dialog('close');
                            alert("[いいえ]が押されました");
                        },
                        'キャンセル': function () {
                            isButtonClicked = true
                            $(this).dialog('close');
                            alert("[キャンセル]が押されました");
                        }
                    },
                    open: function () {
                        isButtonClicked = false;
                    },
                    close: function () {
                        if (isButtonClicked == false) {
                            alert("[キャンセル]が押されました");
                        }
                    }
                });
    
                $('#buttonShowDialog').click(function () {                
                    $('#dialog').dialog('open');
                });
            });
        //]]>
        </script>
    
        <script type="text/vbscript" language="VBScript"> 
            Function msgboxOrg() 
                msgboxOrg = MsgBox("~~~があります。編集内容を更新しますか?破棄しますか?", vbYesNoCancel + vbQuestion, "確認")
            End Function
        </script>
    
        <script type="text/javascript" language="javascript">
            function test() {
                var ret = msgboxOrg();
                if (6 == ret) {
                    alert("[はい]が押されました");
                } else if (7 == ret) {
                    alert("[いいえ]が押されました");
                }
                else {
                    alert("[キャンセル]が押されました");
                }
            }
        </script>
    
    </head>
    <body style="font-size: 12px;">
        <form id="form1" runat="server">
        
            <h2>jQuery UI の Dialog</h2>
            <input type="button" id="buttonShowDialog" value="ダイアログ表示" />
    
            <div id="dialog" title="確認">
                <p>~~~があります。編集内容を更新しますか?破棄しますか?</p>
            </div>
    
            <hr />
            
            <h2>VBScript の MsgBox</h2>
            <input type="button" value="msgbox test" onclick="javascript:test();" />
        
        </form>
    </body>
    </html>
    

    • 回答としてマーク takusan 2015年10月2日 4:27
    2015年9月21日 1:36
  • 返信が遅れまして申し訳ありません。

    他の実装の検討もしたのですが、顧客の要望もあり、

    メッセージの画面イメージが他の箇所と大きく変わってしまうことをかなり嫌がられるため、

    苦肉の策を模索していました。

    私個人としては、上記jqueryの実装も試してみましたが、こっちの方が良いですね。今風ですし。

    結局子画面を作成し、できるだけ似せた画面の作り&動きにしました。

    ご支援ありがとうございました!

    2015年10月2日 4:27