Q&A
JavaScriptのエラーは出ていませんでしょうか？
Boostrap4で、モーダルを表示した際に作動するメソッドが読み込まれない原因がわからないです。
わかる方がいましたらご教示ください。
モックアップデモ画像
javascript
1//タブレット確認モーダル 2 $('#tabModal').on('show.bs.modal', function(event) { 3 //select要素を取得 4 var select = document.getElementById('select1').value; 5 var mail = $("#select1 option:selected").data("mail"); 6 var name = $("#select1 option:selected").data("name"); 7 8 //Ajaxの処理はここに 9 10 var modal = $(this) //モーダルを取得 11 modal.find('.modal-body p#mail-mail').text(mail) //ｐタグにも表示 12 modal.find('.modal-body p#name-name').text(name) 13 14 15 });
html
1<!DOCTYPE html> 2<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4 5<head> 6<meta charset="UTF-8"> 7<meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 9<!--Bootstrap CSS --> 10<link rel="stylesheet" 11 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 12 13<!--Font Awesome5--> 14<link rel="stylesheet" 15 href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 16 17<link rel="stylesheet" type="text/css" href="../css/stylesheet.css"> 18 19<link 20 href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" 21 rel="stylesheet"> 22 23 24<link rel="stylesheet" type="text/css" href="../css/chosen-css.css"> 25 26 27 28</head> 29 30<body class="nanikore"> 31 32 <div class="container h-100"> 33 34 <div class="row align-items-center h-100"> 35 <div class="col-6 mx-auto"> 36 <div class="jumbotron text-center" 37 style="background-color: #5ca580;"> 38 <div class="text-center"> 39 40 <h2 class="mb-5"> 41 <i class="fas fa-users"></i>担当者を選択してください 42 </h2> 43 44 <form th:action="@{/tablet-visitor/select-user}" 45 class="form-inline justify-content-center needs-validation" 46 method="post" novalidate> 47 48 <div class="form-inline"> 49 50 <div class="search-box form-group mb-2 ml-2"> 51 <select class="chosen-select form-control" id="emp"> 52 <option value="" style="font-weight: 100;">部署選択</option> 53 <option th:each="dep:${dlist}" 54 th:text="${dep.deployment_name}" th:value="${dep.id}"></option> 55 </select> 56 </div> 57 58 <div class="form-group mb-2 ml-2 mr-5"> 59 60 <select class="chosen-select form-control list" th:name="emp" 61 id="select1" required> 62 <option value="">氏名選択</option> 63 <option class="list_item font-weight-bold" 64 th:each="user:${ulist}" th:text="${user.emp_name}" 65 th:data-emp="${user.deployment_id}" th:value="${user.id}" 66 th:data-mail="${user.empMail}" 67 th:data-name="${user.emp_name}"></option> 68 69 </select> 70 <button type="button" 71 class="btn btn btn-primary text-center text-light" 72 data-toggle="modal" data-target="#tabModal">入力完了</button> 73 74 </div> 75 76 77 </div> 78 79 80 81 82 <div class="modal fade" id="tabModal" tabindex="-1" 83 role="dialog" aria-labelledby="exampleModalCenterTitle" 84 aria-hidden="true"> 85 <div class="modal-dialog modal-dialog-centered" role="document"> 86 <div class="modal-content"> 87 <div class="modal-header"> 88 <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5> 89 <button type="button" class="close" data-dismiss="modal" 90 aria-label="Close"> 91 <span aria-hidden="true">×</span> 92 </button> 93 </div> 94 <div class="modal-body"> 95 <p>こちらの担当者であっていますか？</p> 96 メールアドレス： 97 <p id="mail-mail"></p> 98 担当者名： 99 <p id="name-name"></p> 100 </div> 101 <div class="modal-footer"> 102 <a href="" type="button" class="btn btn-secondary" 103 data-dismiss="modal">キャンセル</a> 104 <button type="submit" class="btn btn-primary">OK</button> 105 </div> 106 </div> 107 </div> 108 </div> 109 110 111 112 </form> 113 114 </div> 115 116 </div> 117 </div> 118 </div> 119 120 121 </div> 122 123 124 125 126 <!-- Optional JavaScript --> 127 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 128 129 130 <script 131 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 132 133 <script 134 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 135 <script 136 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 137 <script 138 src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> 139 <script 140 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 141 142 143 144 <script 145 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 146 <script 147 src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 148 149 <script src="../js/stylesheet.js"></script> 150 151 152 153</body> 154 155</html>
回答ありがとうございます。
JavaScriptのエラーは出ていませんでした。
$(this) は実際何が取得できているのでしょうか。
回答ありがとうございます。
modalは表示されるのですが、メソッドが呼び出されないので、それ以降の処理の結果がわからない状況です。
モックでデモプログラムを作成したのですが、そっちは呼び出されるのですが。。。
なので、モックで行った場合のデバッグの画像を添付しました。
回答1件
0
ベストアンサー
こちらの環境では、stylesheet.jsはありませんので、それを取り除いた状態のモックアップで確認していますので、ご了承ください。
モックアップHTMLの状態でHTMLならびにJavaScriptのコードを拝見したところ、
html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
これが複数あることが直接の原因です。2つ目の定義は不要です。
<script>の先頭の方ですでに宣言済み→その後Bootstrap用の拡張Javascriptを呼び出しているのですが、その後に再びjQueryを呼びなおしているため、BootstrapのJavaScript用の拡張定義が消されてしまいます。投稿2020/09/09 12:06
総合スコア12011
あなたの回答
tips
プレビュー
