Q&A
Laravelで開発しています。モーダルウィンドウで写真に対してコメントを付ける機能を実装しています。
Javascripでモーダルウィンドウにphoto_idを引き継ぐところまでできました。
モーダルウィンドウ内のFormタグをJavascriptを使って書き換えようと思っているのですが、うまくできません。アドバイスいただけますと幸いです。
###試したこと1 (innerHTMLでformタグを書き換えようとしました）
photo.blade.php
@extends('layouts.app_admin') @section('content') <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 = "{{ Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']) }}" }) } </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> <p>{{ $photo->comment }}</p> @if ($photo->reply === Null) {{-- {!! link_to_route('admin.photoedit', '返信', ['id' => $photo->id], ['class' => 'btn btn-apply applybtn']) !!} --}} <button type="button" class="btn btn-apply applybtn" data-toggle="modal" data-target="#Modal" data-whatever="{{ $photo->id }}"> 返信 </button> @endif </div> @if ($photo->reply === Null) @else <div class="small reply-fromadmin mt-2"> <p>{{ $photo->reply }}</p> </div> @endif </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">×</span></button> <h4 class="modal-title" id="ModalLabel">返信：</h4> </div> <div class="modal-body"> <div id="formmodel"> {{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }} </div> {{ csrf_field() }} <div class="form-group"> {!! Form::label('reply', 'ヒトコト返信') !!}<span class="small">(50文字以内)</span> <div> {!! Form::textarea('reply', null, ['size' => '40x5']) !!} </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button> {!! Form::submit('更新', ['class' => 'btn btn-apply']) !!} {{ Form::close() }} </div> </div> </div> </div> @endsection
上部に<script>タグがあります。script内の//formタグの書き換え部分のinnerHTMLで、
{{--★モーダルウィンドウ--}} の、<div id="formmodel">にある
{{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }}
の$photo->id部分を各photoごとに書き換ようとしました。
↓しかし、このように、script自体がよみこまれなくなってしまいます。。
innerHTML部分をテキストにするとうまく書き換えられます
追加 試したこと2
こちらの記事を見つけて、innerHTMLではなくて、actionを書き換えてみました。
https://www.sejuku.net/blog/28720
それで、コードを以下に変更しました。
@extends('layouts.app_admin') @section('content') <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) //モーダルのタイトルに値を表示 }) function clickEvent() { document.myform.action = "{{ route('admin.photoupdate', ['id' => " + recipient + " ]) }}"; } } </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> <p>{{ $photo->comment }}</p> @if ($photo->reply === Null) {{-- {!! link_to_route('admin.photoedit', '返信', ['id' => $photo->id], ['class' => 'btn btn-apply applybtn']) !!} --}} <button type="button" class="btn btn-apply applybtn" data-toggle="modal" data-target="#Modal" data-whatever="{{ $photo->id }}"> 返信 </button> @endif </div> @if ($photo->reply === Null) @else <div class="small reply-fromadmin mt-2"> <p>{{ $photo->reply }}</p> </div> @endif </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">×</span></button> <h4 class="modal-title" id="ModalLabel">返信：</h4> </div> <div class="modal-body"> <div id="formmodel"> <form name="myform" method="POST" action="{{ route('admin.photoupdate', ['id' => $photo->id ]) }}" id="myform"> <input type="hidden" name="_method" value="PUT"> </div> {{ csrf_field() }} <div class="form-group"> {!! Form::label('reply', 'ヒトコト返信') !!}<span class="small">(50文字以内)</span> <div> {!! Form::textarea('reply', null, ['size' => '40x5']) !!} </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button> <button onclick="clickEvent()">送信</button> </form> </div> </div> </div> </div> @endsection
document.myform.actionで、モーダルウィンドウ中の<form>タグの
<form name="myform" method="POST" action="{{ route('admin.photoupdate', ['id' => $photo->id ]) }}" id="myform">のactionを書き換えるようにしてみました。しかし、
2, 3, 4の返信ボタンをクリックして返信を登録しても、5にupdateされてしまい、photo->idがうまく指定できていないようです…
（modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示）はできているようで、モーダルウィンドウに各photo->idは表示されます。
何か良い方法あれば、アドバイスお願いします・・！
回答1件
0
ベストアンサー
Laravel
1 2{{ Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']) }} 3
だとエスケープされた安全なものになってしまうので
Laravel
1 2{!! Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']) !!} 3
https://readouble.com/laravel/6.x/ja/blade.html
の『エスケープしない出力』を参照。
ddして貰えばわかるともらいますが、
<が<
が>
になってしまってるので正しく解釈されません。
（詳しく解析してないのでわかりませんが、おそらく内部ではhtmlspecialchars()をechoする処理になってるはずです。
echoを使うのも手です。
Laravel
1 2echo Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']); 3
投稿2020/03/13 14:57
編集2020/03/13 15:03
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/14 02:50
2020/03/14 03:16
2020/03/14 03:19
2020/03/14 05:11
2020/03/14 15:28