Laravel5.5を使っています。
ページの「返信」ボタンをクリックした際に、モーダルウィンドウに、idを記載したいのですが、うまく表示できません。
アドバイスいただけると幸いです。
参考にしたもの
https://qiita.com/sofpyon/items/1e72426598eed745f031
https://agohack.com/bootstrap-modal-form-submit-ajax/
コード
photo.blade.php
@extends('layouts.app_admin') @section('content') <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="#modalForm" data-photoid={{ $photo->id }}> 返信 </button> </div> </div> @endforeach @endif <!-- モーダルの設定 --> <div class="modal fade" id="modalForm" 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">×</span></button> <h4 class="modal-title" id="ModalLabel">返信</h4> </div> <form role="form" id="form1" action="" method="POST"> <div class="modal-body"> <div class="form-group"> <label for="message-text" class="control-label">ヒトコト返信(50文字以内)</label> <textarea class="form-control" id="message-text"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button> <button type="submit" class="btn btn-primary" id="chgDateSub" name="xxx" value="reply">返信</button> </div> </form> </div> </div> </div> </div> <script> $('#modalForm').on('show.bs.modal', function (event) { //モーダルを開いたボタンを取得 var button = $(event.relatedTarget); //モーダル自身を取得 var modal = $(this); //photoidの値取得 var photoidVal = button.data('photoid'); log (photoidVal); modal.find('.modal-title').text('photoid:' + photoidVal) }) </script> @endsection
現状
「返信」をクリックしても、モーダルのタイトルが「返信」のままで、script内で記載している、「photoid:」になりません・・
↓ディベロッパーツールを見ると、scriptは読み込まれてはいるようです‥
どこが悪いのかわからず困っております…
何卒、よろしくお願いいたします…!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/10 09:35
2020/03/10 09:45