select boxを選ぶとjQueryによってモーダルウィンドウが発火するというイベントを実行すると、「何も反応しない」という問題で困っています。
原因または解決策をご存知の方はいらっしゃいませんか。
私の行った手順は以下です。
(1)「#modal01」というidを持つselect boxを用意した
(2) #modal01というidを持つselect boxの中身が変わったら、jQueryでモーダルウィンドウが表示されるようにした
しかし、実際にselect boxの中身を変えてみても、設定したmodalウィンドウが発火しません。
私はモーダルウィンドウが動くと思いました。
なぜなら、【参考資料】には、
以下のように書かれているからです。
Bind an event handler to the “change” JavaScript event, or trigger that event on an element.
原因を確かめるため、いくつか試行錯誤を繰り返し行ってみましたが、
問題の解決には至りませんでした。
なお、私の環境は以下の通りです。
【MacBook Air (13-inch, Early 2015), 8 GB 1600 MHz DDR3, macOS Mojave 10.14.5, AWS, Laravel5.8.21】
検索エンジンでjQueryのchangeイベントハンドラを使ってモーダルウィンドウを発火させる方法を検索しましたが、
clickイベントでモーダルウィンドウを発火させる機能に関するページばかりで、解決に役立つ情報は見つかりませんでした。
##解決に至ったコード
●items.blade.php
php
1 <table class="highlight centered"> 2 <thead> 3 <tr> 4 <th>案件名</th> 5 <th>納期</th> 6 <th>単価</th> 7 <th>ステータス</th> 8 <th>メモ</th> 9 <th>編集・削除</th> 10 </tr> 11 </thead> 12 <tbody> 13 <!--変数化して、formsのindex番号を割り振るための$index--> 14 <?php $index = 0; ?> 15 @foreach($list as $val) 16 <tr> 17 <th>{{$val->item_name}}</th> 18 <th>{{$val->delivery_date}}</th> 19 <th>{{$val->unit_price}}円</th> 20 <th> 21 <form method="POST" action="/updateItemStates/{{$val->id}}" id="states_form"> 22 {{csrf_field()}} 23 <div class="input-field col s12"> 24 <select id="states" class="select" name="states" onchange="modalOpen{{$val->id}}()"> 25 <option value="1" {{$val->states == '1' ? 'selected' : ""}}>未執筆</option> 26 <option value="2" {{$val->states == '2' ? 'selected' : ""}}>請求書挿入</option> 27 </select> 28 <label for="states">ステータス</label> 29 </div> 30 </form> 31 <script> 32 function modalOpen{{$val->id}}() { 33 //alert(document.forms[{{$loop->index - 1}}].states.selectedIndex); 34 if(document.forms[{{$index}}].states.selectedIndex==1){ 35 //document.getElementById('states').selectedIndex 36 document.modal_form.item_id.value = '{{$val->id}}'; 37 $('#modal01').modal('open'); 38 } 39 } 40 </script> 41 <?php $index ++; ?> 42 </th> 43 <th>{{$val->memo}}</th> 44 <th><a href="/editItem/{{$val->id}}">管理画面</a></th> 45 </tr> 46 @endforeach 47 </tbody> 48 </table> 49 </div> 50 </div> 51 52 <!--請求書選択モーダル--> 53 <div class="modal" id="modal01"> 54 <div class="overLay modalClose"></div> 55 <div class="inner"> 56 {{Form::open(['url' => 'addInvoice', 'id' => 'modal_select', 'name' => 'modal_form' ])}} 57 {{ csrf_field() }} 58 <select name="invoice_id" class="select" onchange="submit(this.form)"> 59 @foreach($invoiceList as $val) 60 <option value="{{$val->id}}">{{$val->invoice_title}}</option> 61 @endforeach 62 </select> 63 <label for="client_id">登録先の請求書</label> 64 <button type="submit" class="btn btn-primary">請求書へ挿入</button> 65 {{Form::hidden('item_id', '')}} 66 {{Form::hidden('states', '2')}} 67 {{Form::hidden('client_id', $client->id)}} 68 @foreach($list as $val) 69 {{Form::hidden('item_name', $val->item_name)}} 70 {{Form::hidden('bill_unit_price', $val->unit_price)}} 71 @endforeach 72 {{Form::close()}} 73 <a href="" class="modalClose">Close</a> 74 </div> 75 </div>
回答1件
あなたの回答
tips
プレビュー