Laravelのページからモーダルにデータを渡す簡単な方法はありますか？

Question

私がLaravelとBootstrapを使用して作成しているウェブサイトには、ユーザーがサイトに投稿した書籍の一覧を示す表があります。ここで本のコレクション与えられ、ビューでテーブルを表示するコードです：あなたが見ることができるように

<table class="table table-hover" id="table"> 
    <thead> 
     <tr> 
     <th class="col-md-3">Title</th> 
     <th class="col-md-3">Author</th> 
     <th class="col-md-2">Price</th> 
     <th class="col-md-2">Courses</th> 
     <th class="col-md-2">Date Added</th> 
     <th class="col-md-2">More Info</th> 
     </tr> 
    </thead> 
    <tbody class="searchable"> 
     @foreach($books as $book) 
      <tr> 
      <td>{{$book->title}}</td> 
      <td>{{$book->author}}</td> 
      <td>${{$book->price}}</td> 
      <td>{{$book->course_code}}</td> 
      <td>{{$book->added_on}}</td> 
      <td><button type="button" data-toggle="modal" data-id="{{$book->id}}" data-title="{{$book->title}}" data-author="{{$book->author}}" 
       data-price="{{$book->price}}" data-school="{{$book->school}}" data-description="{{$book->description}}" data-courses="{{$book->course_code}}" 
       data-date="{{$book->added_on}}" href="#more_info" class="btn btn-primary">More Info</button></td> 
      </tr> 
     @endforeach 
    </tbody> 
</table> 

は、テーブル内の各エントリの最後の列に表示されるボタンのコードは、3本のライン上に行きます私はデータ属性を使って本のプロパティも保存しているからです。これは、ブックのデータをボタンが呼び出すモーダルに渡すことができるようにするためです。ここで召喚されるモーダルだ：

<div class = "modal fade" id = "more_info" role = "dialog"> 
    <div class = "modal-dialog"> 
     <div class = "modal-content"> 
      <div class = "modal-header"> 
       <h4 id="book_title">Title</h4> 
       <h5 id="book_author">Author</h5> 
      </div> 
      <div class = "modal-body"> 
       <p id="book_price">Price: </p> 
       <p id="book_school">School: </p> 
       <p id="book_course_code">Course(s): </p> 
       <p id="book_date">Added On: </p> 
       <p>Description:<br></p> 
       <p id="book_description">Description<br></p> 
      </div> 
      <div class = "modal-footer"> 
       <a class = "btn btn-default" data-dismiss = "modal">Close</a> 
       <input type="hidden" name="book_id" id="book_id" value=""/> 
       <button class = "btn btn-primary" data-dismiss = "modal" href="#contact_seller" data-toggle="modal">Contact Seller</button> 
      </div> 
     </div> 
    </div> 
</div> 

ここでモーダルにページから書籍のデータを渡すJavascriptのコードは次のとおりです。

$(document).ready(function() { 

    $('#more_info').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget) // Button that triggered the modal 
      var id = button.data('id') // Extract info from data-* attributes 
      var title = button.data('title') 
      var author = button.data('author') 
      var price = button.data('price') 
      var school = button.data('school') 
      var description = button.data('description') 
      var courses = button.data('courses') 
      var date = button.data('date') 

      var modal = $(this) 
      modal.find('#book_title').text(title) 
      modal.find('#book_author').text("By " + author) 
      modal.find('#book_price').text("Price: $" + price) 
      modal.find('#book_school').text("School: " + school) 
      modal.find('#book_course_code').text("Course(s): " + courses) 
      modal.find('#book_date').text("Added On: " + date) 
      modal.find('#book_description').text(description) 
      modal.find('#book_idx').text(id) 
    }) 

}); 

ページからデータを渡すよりエレガントな方法はありますモーダルに？

私は、特定の書籍IDを使用してデータベース検索を行うことができるので、ビューに必要なすべてのデータをモーダルに表示することができますか？

Answer 1

ここでは、書籍の内容をブックのIDで悩まされた変数に保存するだけで、ボタンに設定した唯一の属性となる簡単な方法があります。

だけで、テーブルの端下のが、あなたのjqueryのコードの前に

<tbody class="searchable"> 
    @foreach($books as $book) 
     <tr> 
     <td>{{$book->title}}</td> 
     <td>{{$book->author}}</td> 
     <td>${{$book->price}}</td> 
     <td>{{$book->course_code}}</td> 
     <td>{{$book->added_on}}</td> 
     <td><button type="button" data-toggle="modal" data-id="{{$book->id}}" href="#more_info" class="btn btn-primary">More Info</button></td> 
     </tr> 
    @endforeach 
</tbody> 

が$図書は（Laravel 5.xの中に）収集インスタンスであると仮定すると、次のスクリプトタグを作成今

<script> 
    var appVairiables = {}; 
    appVariables.books = {!! $books->groupBy('id') !!}; 

    //output result will be like 
    // books = { 
    // 1 : { 
    // id : 1, 
    // author : "author1" 
    // .. 
    // }, 
    // 3 : { .. }, 4 : { ... } 
    //} 

</script> 

あなたjquery関数では、次の操作を実行します

$(document).ready(function() { 

$('#more_info').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) // Button that triggered the modal 
     var id = button.data('id') // Extract info from data-* attributes 
     var book = appVariables.books[id]; //fetching the contents of book according to id received 

     var modal = $(this) 
     modal.find('#book_title').text(book.title) 
     modal.find('#book_author').text("By " + book.author) 
     modal.find('#book_price').text("Price: $" + book.price) 
     modal.find('#book_school').text("School: " + book.school) 
     modal.find('#book_course_code').text("Course(s): " + book.courses) 
     modal.find('#book_date').text("Added On: " + book.added_on) 
     modal.find('#book_description').text(book.description) 
     modal.find('#book_idx').text(book.id) 
    }) 
});