質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 369

mikeko0901

score 27

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でなくても実装できそうでしたら、その方法をご教示いただけると助かります。
どんなことでもかまいませんので、アドバイス何卒、よろしくお願いいたします!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

<script>のタグの位置の問題です。
現在の位置ではid=Modalのdivがまだ読み込まれていない為、'show.bs.modal'のイベントを付与する対象が存在していない状態です。
その為、返信をクリックしても、'show.bs.modal'で定義した処理は呼び出されず、普通にモーダルが開くだけになります。
id=Modalのdivが読み込まれた後に'show.bs.modal'のイベント付与が実行されるようにすれば、モーダルが開くタイミングで定義した処理も呼び出されるようになります。
やり方は2つあります。

方法1 <script>の位置をid=Modalのdivの後にもってくる

<div class="modal fade" id="Modal"…
</div>
→<script>をここに持ってくる

方法2 すべてのタグの読み込みが終わったあとで実行されるようにする

<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/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/12 00:25

    ありがとうございます!
    アドバイスいただきました通りに、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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる