【Bootstrap】プルダウンの項目クリックでモーダルを表示させたい

Question

実現したいこと

Bootstrap4系を用いて、プルダウンの項目をクリックすることでモーダルを表示させるようなフロントエンドを開発しています。
作成するにあたり、こちらのサイトを参考にしました。

ソースコード

当方の理解では、プルダウンの項目(<a>タグ要素)をクリックした際にはonchangeイベントが発生し、モーダルダイアログの表示にはonclickイベントが必要だと認識しています。

今回のようにプルダウンの項目クリックでモーダルを表示させる上で、モーダルダイアログを表示させるための非表示ボタンを設置しています。

<ul class="navbar-nav">
 <li class="nav-item dropdown">

  <!-- この画像をクリックすることでプルダウン項目表示 -->
  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <img class="rounded-circle u-box-shadow-sm mr-2" width="25" height="25" src="{% static 'img/three_dots_icon.png' %}" alt="Icon">
  </a>

  <!-- プルダウン項目 -->
  <div class="dropdown-menu" id="menu" aria-labelledby="navbarDropdown">
   <a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal">Edit</a>
   <!-- モーダル用非表示ボタン -->
   <button type="button" class="btn btn-primary invisible" id="showModal" data-toggle="modal" data-target="#commentModal">
                    Invisible Trigger Button

   <a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal">Delete</a>
   <!-- モーダル用非表示ボタン -->
   <button type="button" class="btn btn-primary invisible" id="showModal" data-toggle="modal" data-target="#commentModal">
                    Invisible Trigger Button
   </button>

   <!-- モーダルダイアログ -->
   <div class="modal fade bd-example-modal-lg" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
      <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Large Size</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
              ...
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
      </div>
     </div>
    </div>
   </div>               
  </div>
 </li>
</ul>

-中略-

<script type="text/javascript">
  const showModalButton = document.getElementById("showModal");
  const menu = document.getElementById("menu");
  const onChange = (e) => {
    if(e.target.value === "0"){
      showModalButton.dispatchEvent(new Event("click"));
    }
  };
  menu.addEventListener("change", onChange);
</script>

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

プルダウン項目をクリックすると、画面がグレーアウトするところまでは良いのですが、モーダルダイアログがポップアップされません。

また、ブラウザの検証ツールを確認してみたところ、コンソール画面では下記のようなメッセージが表示されました。

おそらく、const onChange = (e) => { if(e.target.value === "0"){ showModalButton.dispatchEvent(new Event("click")); } };の部分がうまくいっていないのかと思われますが訂正方法を調べてもわかりませんでした。

試したこと

・プルダウンを解除し、リンククリックのみにしたところ正常にモーダルダイアログが表示されました。

Comments

[m.ts10806]

e.target.valueが想定の値になっているか確認はしてみましたか？

Answer 1

気になるのはshowModalというIDが複数あること。
IDは同ページ内で重複不可です。別の名前にするか、同じイベントを取らせたいなら同名classを振ってイベントを付与することですかね。

つまり、

const showModalButton = document.getElementById("showModal");

ここで躓いてる可能性高いです。

ただ、モーダルの表示は別にクリックイベントにすり替える必要なくて、
https://getbootstrap.jp/docs/4.2/components/modal/
$(#hoge).modal('show')のようにすれば任意のタイミングでモーダル呼び出せたはずです。つまりmodal呼び出すためのボタンは不要。任意のタイミングで任意のモーダルを直接呼び出すことができます。
※ドキュメントのサンプルはjQueryです

Comments

[Mr_PONPON_MARU]

コメントありがとうございます。ご指摘と公式ドキュメントを参考に、モーダルの呼びだしボタンを削除し、idタグ値の同一性担保と<script>タグ内のモーダル呼び出しをjsで記述してみましたが、グレーアウトするのみで、相変わらずモーダルダイアログが表示されませんでした。

```article_detail.html
<ul class="navbar-nav">
<li class="nav-item dropdown">

<!-- この画像をクリックすることでプルダウン項目表示 -->
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="rounded-circle u-box-shadow-sm mr-2" width="25" height="25" src="{% static 'img/three_dots_icon.png' %}" alt="Icon">
</a>

<!-- プルダウン項目 -->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal">Edit</a>
<a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal2">Delete</a>

<!-- モーダルダイアログ -->
<div class="modal fade bd-example-modal-lg" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Large Size</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

-中略-

<script type="text/javascript">
$('#showModal').on('show.bs.modal', function () {
$('#commentModal').modal('show');
});
</script>
```

```$('#showModal').modal('show')```とすると、モーダル表示のトリガーとなるプルダウンメニューの項目をクリックせずとも、ページを開いた瞬間にグレーアウトしてしまいます。(グレーアウトのみでモーダルダイアログは表示されず)

また、プルダウンを削除しリンククリックによる方法も確認してみたところ、モーダル呼び出し用のスクリプトを<script>タグ内に記述せずとも、もともと読み込んでいたソースファイルのみでモーダルダイアログが正常に表示されました。

当方、恥ずかしながらjsに関する知識が浅く、訂正コードのjsの記述自体が間違っている可能性もあるかもしれませんが、今一度ご意見をいただければ幸いです。

[Mr_PONPON_MARU]

追記になります。

全ての元凶は、プルダウンのメニューの間にモーダルダイアログのhtmlを記述していたことにありました。
下記のようにすることで解決しました。
```
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="rounded-circle u-box-shadow-sm mr-2" width="25" height="25" src="{% static 'img/three_dots_icon.png' %}" alt="Icon">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="showModal" data-toggle="modal" data-target="#commentModal">Edit</a>
<a class="dropdown-item" href="{% url 'article:comment_update' object.pk %}">Edit</a>
<a class="dropdown-item" href="{% url 'article:comment_delete' object.pk %}">Delete</a>
</div>

<!-- モーダルダイアログ -->
<div class="modal fade bd-example-modal-lg" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Large Size</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</li>
</ul>
```