是否有更简单的方法将数据从页面传递到Laravel中的模态？

Question

The website that I'm making using Laravel and Bootstrap has a table that lists books posted by users on the site. Here's the code that displays the table in the view, given a collection of books:

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

As you can see, the code for the button that appears in the last column of each entry in the table goes onto three line, since I'm also storing the properties of a book using data attributes. This is so that I can pass the book's data to a modal that the button will summon. Here's the modal that will be summoned:

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

Here's the Javascript code that passes the book's data from the page to the modal:

$(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)
    })

});

Is there a more elegant way of passing data from the page to the modal?

Like is it possible that I can just do a database lookup using a given book id so I can get all the necessary data for the view to display them on the modal?

Answer 1

Here is a simpler approach to the problem, you just save the content of books in a variable groubed by the id of book, which becomes the only attribute you set in the button.

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

Just below the table ends but before your jquery code create the following script tag assuming that the $books is a collection instance (in 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>

Now in you jquery function you do the following

$(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)
   })
});