スキップしてメイン コンテンツへ

 none
C#.net ASP.net、XHTML5を使用したプロジェクトでjavascriptが動作しない件。 RRS feed

  • 質問

  • VIsualStudio2017でC#.net ASP を使用したアプリを作成しましたが、どうもJQUERYのカレンダー等は動作するのですが、

    単純なjavascriptが動作しない現象が起こって困っています。

    下記にコードを載せます。

    ----------------------------------------------------------------------------------------

    //下記のjavascriptは実行されているかどうかすらわからない。

        <script type="text/javascript">
            const btn = document.getElementById('JavaPopup');
            btn.addEventListener('click', function () {
                //console.log(userText.value);
                console.log("ポップアップ表示!!");
            });

        </script>
       

    //下記のjavascriptは正常にポップアップ画面が出る。
        <script type="text/javascript">
            $(document).ready(function () {
                $('.open-popup-link').magnificPopup({
                    type: 'inline'
                });
            });
        </script>

       <style>
            .white-popup {
             
              background: #FFF;
              padding: 20px;
              width: 250px;
              max-width: 500px;
              margin: 20px auto;
            }
        </style>

    <body style="height: 699px; width: 1467px">

        <form id="form1" runat="server">
    //マグニフィックポップアップ
                <a href="#test-popup" class="open-popup-link">Show inline popup</a>
                <div id="test-popup" class="white-popup mfp-hide">
                        JavaScript Popup!!
                </div>

    //JavaScriptのポップアップ

         <div>
                  <asp:Button ID ="JavaPopup" Text ="JavaScriptPopUp" runat="server" />

              </div>

         </form>

    </body>

    ------------------------------------------------------------------------------------------------------------------

    そもそもデバッグ不可能なのでブレークポイントも置けませんし実行されているのかすらわからないので、

    ご指導・ご鞭撻のほど、どうしたらうまく動作するか指南のほどよろしくお願いします。

    2019年12月12日 1:06

回答

すべての返信

  • > そもそもデバッグ不可能なのでブレークポイントも置けませんし実行されているのかすらわからないので、

    「デバッグ不可能」というのは Visual Studio でブレークポイントを設定できないということですか?

    そういう場合、ありがちなのは JavaScript / jQuery が文法的に間違っていて、有効なスクリプトになってないということです。

    そのあたりを調べてください。(自分はコードはまだ見てません。ある程度質問者さんの方で切り分けしていただくようお願いします)

    PS. 調べてもどうしてもわからなかったらまた質問してください。その時は、質問者さんが調べて分かったことがあったら書いてくださいね。

    • 編集済み SurferOnWww 2019年12月12日 1:49 追記
    2019年12月12日 1:41
  • コード切り分けした結果を載せてます。

    コード見るかコメント見るかで分かるような気がするんですが、それは置いておいて、

    再度簡素なjavascriptで動作確認しましたがやはり、動作せず。Html中に現在時刻を表示するスクリプトです。

    下記にソースの切り分けしたものを載せます。

    //スクリプト

        <script type="text/javascript">
            var current = new Date();
            var time = document.getElementById('time');
            time.textContent = current.toLocaleTimeString();
        </script>

    //HTML

            <div>
                現在時刻:<span id="time"></span>
            </div>

    ↑のコードは要するに、スパン中のIDからスクリプトのgetElementIDで変数にいれて現在時刻を表示されるものですが、

    現在時刻:~~時~~分がでません。結果は失敗に終わります。

    なせだかわかりません。

    2019年12月12日 2:19
  • クライアント(Web ブラウザー)の開発者ツール(F12 を押すと出てくる)でクライアント サイドでの JavaScript デバッグを行う、JQuery なしの(そもそも読み込まない)ページでの動作を確認する、などが基本的な対応として考えられますね。

    ※そもそもクライアントにその JS コードが送られてますか?


    Hebikuzure aka Murachi Akira

    2019年12月12日 2:25
  • ClientIDMode プロパティで Static を指定しておくとどうでしょうか。(グリッド等で繰り返し出力される場合は駄目ですが)

    <asp:Button ID="JavaPopup" ClientIDMode="Static" Text="JavaScriptPopup" runat="Server" />

    もしくは、ClientIDMode は指定せずに、JavaPopup.ClientId から得られる値を getElementById に渡すようにするとか。

    const btn = document.getElementById('<%= JavaPopup.ClientID %>');

    -- 追記 --

    上記いずれのパターンでも駄目なら、ボタンが HTML として生成される前に document.getElementById を読み込んでいたりはしませんか?jQuery の方はページがロードされ終わった後に呼ぶように書かれていますが、DOM 版の方はそのような書き方をしておらず、即時処理する書き方になっていますよね。

    もしくは、console.log は行われているけれど、ボタン押下時に submit されてしまって、コンソールがクリアされたようにみえているとか…。

    2019年12月12日 2:55
  • 実行ブラウザ上でF12キーを押すと開発者ツールからクライアントサイドのJavaScriptをデバッグ出来ることも知りませんでした。ご指摘ありがとうございます。getElementbyIDは実行されてるような感じがしますが、そもそもDate()関数が見つからないのではないかと思ったりもします。

    Htmlのhead内で基本的なJavascriptが利用できるようなリンクを貼らないといけないのでしょうか?。

    ---------------------------------------------------------------------------------------------------------------------------  

    <!-- 読み込むCSSの指定 //-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"/>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
        <link rel="stylesheet" href="path/to/node_modules/element-theme-default/lib/index.css" />
        <link rel="stylesheet" href="Magnific-Popup/dist/magnific-popup.css" />

       

    ---------------------------------------------------------------------------------------------------------------------

    <!-- 読み込むJQUERYの指定 //-->
        <script type="text/javascript"    src="C:\Users\source\repos\WebApplication1\WebApplication1\JavaScript\jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       

    --------------------------------------------------------------------------------------------------------------------------------


        <!-- 読み込むJavaScriptの指定 //-->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
        <script src="Magnific-Popup/dist/jquery.magnific-popup.js"></script>

    -------------------------------------------------------------------------------------------------------------------------------

    ↑は自分の作成したaspxファイルのhead内の内容です。Jqueryのカレンダーやポップアップはちゃんと表示されるので、

    もしかしたら作成したプロジェクトでは基本的なJavaScriptが動作しないのかもしれませんし、ただ単純にリンク貼りが足らないのか不明な現状です。

    2019年12月12日 3:23
  • > コード見るかコメント見るかで分かるような気がするんですが、それは置いておいて、

    読めばわかるんだから、ごちゃごちゃ言ってないで、おまえはよく読んで回答すればいいんだよ・・・と、かなりの上から目線で言われているような気がしますけど、気のせいでしょうか?

    答えは他の方のレスの中にありますのでよく読んでください。


    • 編集済み SurferOnWww 2019年12月12日 3:51 追記
    2019年12月12日 3:42
  • 返信ありがとうございます。追記に書かれている通り、DOM版(っていう表現を知りませんでした。)の方は順序関係が重要でした。

           <div>
                現在時刻:<span id="time"></span>
            </div>
        
            <script type="text/javascript">
                var today = new Date();
                var time = document.getElementById('time');
                time.textContent = today.toLocaleTimeString();
            </script>

    上記の順にコードを書くと上手く表示されるようになりました。進展したと思います。ありがとうございます。

    表示結果は

    現在時刻:12:47:25

    とちゃんと現在時刻:の右に取得した時間を表示させれました。

    DOM版は順序関係というか上から下に読み込む感じだと把握できたと思います。

    ありがとうございます。DOM版のポップアップにもチャレンジします。

    2019年12月12日 3:52
  • 申し訳ないです。かなり煮詰まっていた状況でしたので、かなりDOM版のスクリプトが実行されないケースで何か月か悩んでましたから感情的になったのかもしれません。本当に申し訳ないです。

    でも上から目線は気のせいだと思います。。

    レス頂けただけでもありがたいです。ありがとうございました。

    DOM版のポップアップにトライします。基本的な事はJavaScriptでもわかってきたなあとは思います。

    今まで苦手意識を正直ぬぐえなかったですが、それが払しょくされた気がします。

    2019年12月12日 4:10
  • <body> 以下のロードが終わるまでは、HTML の要素を操作しないようにしましょう。

    <script> は <head> 内に事前に配置することも多いかと思いますが、このような場合には、jQuery の ready 時や、window, document, body の onload イベント、あるいは DOMContentLoaded に対してイベントリスナーを追加することで遅延実行させることができます。

    document.addEventListener('DOMContentLoaded', function() {
      // ここに処理を記述
    });
    


    あわせてこちらもご覧ください。

    それと、最初の質問にあったサーバーコントールの場合ですが、サーバー側での id 値と、クライアント側での id 値は必ずしも一致しないことがあります。これについては下記をご覧ください。

    かなり煮詰まっていた状況でしたので、

    逆の意味にもなりえるので、こういう時は「行き詰っていた」と表現した方が良いですよ。

    2019年12月12日 5:01
  • 返信ありがとうございます。僕がGoogleで調査した結果はASPのボタンイベントでJAVASCRIPTのポップアップを表示させることは基本的に不可能という事でした。なぜならC#コードはサーバーサイドでスクリプト自体はクライアントサイドだからです。C#とASPを使ってポップアップを表示させるには

    1.別にAJAXコントロールツールキットのプラグインコントロールをVISUALSTUDIOに追加して使用する事かなと結論付けしたところでした。

    2.もしくはJQUERYのマグニフィックポップアップを使用するとか。

    3.そうでなければ、ポップアップのフォームを別に作成するとか。

    ですが、再返信が御座いましたのでそちらを参考にしつつ、再び試行錯誤しようと思います。

    魔界の仮面弁士様、ありがとうございます。

    2019年12月12日 15:46
  • だぶんですが、getElementbyID が実行されてエラーになっている(object not found)のではないかと思います。

    getElementbyID が HTML の取得したい要素の記述より前に書かれていると、要素の DOM が生成される前に getElementbyID が実行されるので、Object not found になります。そうなれば当然イベント リスナーも設定されず、イベントが発火しても何も起きないという結果になるでしょう。





    Hebikuzure aka Murachi Akira

    2019年12月13日 1:09
  • Hebikuzure aka Murachi Akira様返信ありがとうございます。

    >getElementbyID が HTML の取得したい要素の記述より前に書かれていると、要素の DOM が生成される前に getElementbyID が実行されるので、Object not found になります。

    今では納得できますが、おっしゃる通りだと思います。DOMという用語は良くはわかってないですが多分、フレームワークを使わないJavaScriptの事かなあぐらいの認識です。その基本的なスクリプトが今まで動かなくて思案にあけくれてたわけですが、単純な事だったんですね。僕の中ではHead内にスクリプトを書いてBody内にコントロールを書くが常識化してた為引き起った事だと考えます。どう実行されているかを意識する事も大事なんだなあと認識させられました。

    2019年12月13日 4:17
  • > getElementbyID が実行されてエラーになっている(object not found)のではないかと思います。

    スクリプトエラーが出るのはそこではなくて、btn.addEventListener('click', function () { ...  } ); のところです。

    const btn = document.getElementById('JavaPopup'); のところでは JavaPopup という要素はまだ存在しないので btn は null になります。

    null に addEventListener はできないということでスクリプトエラーが出ます。

    質問者さんが Visual Studio でコードを動かしているとすると何故それに気が付かないのか不思議です。IE を使っていればスクリプトエラーが表示されるはずです。

    試しに自分の Visual Studio Community 2015 と IE11 で質問者さんのコードの問題ある方のみをコピペして試してみると、

    [デバッグ(D)]⇒[デバッグの開始(S)」では以下のようにスクリプトエラーが表示されます。

    [デバッグ(D)]⇒[デバッグなしで開始(H)」では IE11 でスクリプトエラーが検出され以下のダイアログが出ます。

    [はい]をクリックすると開発者ツールが立ち上がって以下のようにエラーの場所と内容が表示されます。

    なので、Visual Studio + IE で実際に動かして検証できる質問者さんに分からないはずはないのですけど・・・

    2019年12月13日 6:13
  • 因みに実行環境でIEは使っていません。クロームを使っています。

    Windwos10からはエッジを利用してネットサーフィンしたりしていますし。

    今の環境ではターゲットブラウザにクロームを使っている現状です。

    そしてこの話題はもうクローズにしましたので返信不要です。

    色々な皆さんありがとうございました。

    2019年12月18日 21:35
  • > そしてこの話題はもうクローズにしましたので返信不要です。

    質問者さん個人に対してのみにレスしているわけではありません。ここの閲覧者全員に情報提供しているつもりです。

    ここは「ユーザー同士が情報交換を行うための場」ということです。以下の通知を見てください。ここは質問者さん専用の Q&A サイトではないことは確かです。

    フォーラムでご質問頂くにあたっての注意点
    https://social.msdn.microsoft.com/Forums/ja-JP/ca9ecfb7-4407-4fcb-b8bd-207d68257e68

    なので、質問者さんが「回答としてマーク」を付ければ終わりという訳ではなくて、その後でも、いつでも、情報提供に制約はないはず。

    2019年12月19日 1:11
  • IE じゃなくても Chrome でも Edge でも F12 を押すと開発者ツールが出てくることには変わりはないし、デバッグできることも同じ。

    そもそも問題が解決できて「クローズ」であれば、具体的に何が問題であってどのように解決できたのか、報告するのが質問者としての望ましい対応です。


    Hebikuzure aka Murachi Akira

    2019年12月19日 3:30
  • 現状の問題点・課題というのが、JAVASCRIPTそもそもがVisualStudio2019で動くのかという懸念を持っていました。

    皆さんとの交流を通じてDOM版のJAVASCRIPTの書き方が悪かったせいがあります。

    <head>内にスクリプトを書けばよくて<body>内にはスクリプトのトリガーになるコントロールを置けばよいと思っていました。

    そうではないという事がDOM版の場合はわかりました。

    ありがとうございます。

    2019年12月21日 5:43
  • > DOM版のJAVASCRIPTの書き方が悪かったせいがあります。

    「DOM 版の JavaScript」という言い方は変ですよ。以下の記事を読んでください。

    ドキュメントオブジェクトモデル (DOM)
    https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model

    今回の質問者さんの最初の質問のコードで言うと、動かなかった方のコードは普通の JavaScript で(DOM 版とか言うものではなくて、あえて言うなら DOM を操作するためのスクリプト)、動いた方のコードは JavaScript のライブラリである jQuery です。

    > <head>内にスクリプトを書けばよくて<body>内にはスクリプトのトリガーになるコントロールを置けばよいと思っていました。そうではないという事がDOM版の場合はわかりました。

    違いが理解できてないようですが、どちらも結局は JavaScript なので、どちらを使おうと書く順番を間違えると動かないのは同じです。

    jQuery のコードの方が動いたのは $(document).ready(function () { ... }); で囲ってあったからです。<head> 内に書いても DOM が構築されるまで待って { ... } の部分のスクリプトを動作させるようになってます。

    動かなかった方のコードにはそういう配慮がないというのは分かりますか? jQuery のコードと同様にそういうコードを加えることはできます。そうすれば同じように <head> 内に書いても問題なく動きます。



    • 編集済み SurferOnWww 2019年12月21日 8:19 脱字追加
    2019年12月21日 6:44