Laravel でモーダルウィンドウを使ってupdateしたい

Question

Laravelを使って開発しています。
猫の写真にコメントを付ける機能をモーダルウィンドウを使って実装したいと思っていますが、
パラメータ（photoのid）を受け渡し方法で悩んでいます。

現状

route、Controllerとつなぐ前に、パラメータがちゃんとモーダルウィンドウに引き継げるかを試しているのですが、そこでつっかえてしまいました。。

「返信」をクリックすると、モーダルウィンドウが表示されます。

モーダルウィンドウにパラメータが受け渡っているか確認するために、黄色〇部分にphoto idを表示させようとしているのですが、表示されません・・・
うまくパラメータが渡っていないようです。

コード

こちらの記事を参考にしています。（ほぼコピペです）
https://qiita.com/sofpyon/items/1e72426598eed745f031

https://cccabinet.jpn.org/bootstrap4/components/modal

view

@extends('layouts.app_admin')

@section('content')

<script>
$('#Modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
  var recipient = button.data('whatever') //data-whatever の値を取得
  //Ajaxの処理はここに
  var modal = $(this)  //モーダルを取得
  modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示
  modal.find('.modal-body input#recipient-name').val(recipient) //inputタグにも表示
})
  </script>  


    <h1>Photo一覧</h1>

    <div class="row mt-5">
        @if (count($photos) > 0)
            @foreach ($photos as $photo)
    
               <div class="col-xs-12 col-md-3 text-center contents-cats mb-5">
                    <img src="{{ $photo->image_path }}">
                    <div class="caption">
                        <div class="small">{{ $photo->created_at }}</div>
                        <div class="small">
                            <a href="{{ action('UsersController@show', $photo->user_id) }}">{{ $photo->user_id }}：
                            <?php // ユーザー名を取得する処理
                        
                                $user = $users->find($photo->user_id);
                                print $user->name;
                        
                            ?></a>
                            
                        </div>
                         <p>{{ $photo->comment }}</p>
                        
                        <button type="button" class="btn btn-apply applybtn" data-toggle="modal" data-target="#Modal" data-whatever="@{{ $photo->id }}">
                            返信
                        </button>
                        
                    </div>
                </div>

            @endforeach
        
        @endif
        
        <!-- モーダルの設定 -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  　<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">返信：</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="message-text" class="control-label">ヒトコト返信（50文字以内）</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-primary">返信</button>
      </div>
    </div>
  </div>
</div>
</div>
    
    @yield('script3')
    
@endsection

scriptでは、

modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示

とやっているのに、表示は「返信」となっているので、どうやらscriptがうまく読み込まれていないのかな…と思っています。

また、この表示がうまくできたら、モーダルウィンドウのに、Routeへのリンクを設定しようと思っているのですが、その場合、recipient　に　$photo->id　の値が入っているので

<form method="post" action="/photo/recipient">
    <input name="_method" type="hidden" value="PUT">
    <input type="text" name="name" />
    <input type="submit" />
</form

とすればよいでしょうか？

ここには、jsを読み込んだ方法を記載しておりますが、jsはまだ不勉強のため、jsでなくても実装できそうでしたら、その方法をご教示いただけると助かります。
どんなことでもかまいませんので、アドバイス何卒、よろしくお願いいたします！

Answer 1

<script>のタグの位置の問題です。 現在の位置ではid=Modalのdivがまだ読み込まれていない為、'show.bs.modal'のイベントを付与する対象が存在していない状態です。 その為、返信をクリックしても、'show.bs.modal'で定義した処理は呼び出されず、普通にモーダルが開くだけになります。 id=Modalのdivが読み込まれた後に'show.bs.modal'のイベント付与が実行されるようにすれば、モーダルが開くタイミングで定義した処理も呼び出されるようになります。 やり方は２つあります。 方法1 <script>の位置をid=Modalのdivの後にもってくる ```html <div class="modal fade" id="Modal"… </div> →<script>をここに持ってくる ``` 方法2 すべてのタグの読み込みが終わったあとで実行されるようにする ```html <script> window.onload = function() { $('#Modal').on('show.bs.modal', function (event) {…} } </script> <h1>Photo一覧</h1> … ```

方法2に関してはbootstrapはjqueryを利用しているのでやり方はいろいろあります。
https://www.webprofessional.jp/jquery-document-ready-plain-javascript/

Comments

[mikeko0901]

ありがとうございます！
アドバイスいただきました通りに、Scriptを以下に書き換えたらidが表示されました。
```
<script>
window.onload = function() {

$('#Modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
var recipient = button.data('whatever') //data-whatever の値を取得
//Ajaxの処理はここに
var modal = $(this) //モーダルを取得
modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示

//formタグの書き換え
var formmodel = document.getElementById('formmodel');
//formmodel.innerHTML = "かきかえました<div class=" + recipient +"></div>";

})

}
</script>
```

ありがとうございます！

また、もしよろしければ、この後のJavascriptからhtmlを書き換える部分でつまっておりまして、お時間あればアドバイスいただけますと幸いです…
https://teratail.com/questions/246575

この度はありがとうございました！