Javascript 在Laravel中,有没有更简单的方法将数据从页面传递到模式?
我使用Laravel和Bootstrap制作的网站有一个表格,列出了用户在网站上发布的书籍。以下是在给定书籍集合的情况下,在视图中显示表的代码:Javascript 在Laravel中,有没有更简单的方法将数据从页面传递到模式?,javascript,php,jquery,twitter-bootstrap,laravel,Javascript,Php,Jquery,Twitter Bootstrap,Laravel,我使用Laravel和Bootstrap制作的网站有一个表格,列出了用户在网站上发布的书籍。以下是在给定书籍集合的情况下,在视图中显示表的代码: <table class="table table-hover" id="table"> <thead> <tr> <th class="col-md-3">Title</th> <th class="col-md-3">Auth
<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>
是否有更优雅的方式将数据从页面传递到模式
比如,我可以使用给定的图书id进行数据库查找,这样我就可以获得视图在模式上显示它们所需的所有数据吗?这里有一个更简单的方法来解决这个问题,您只需将图书内容保存在一个由图书id组成的变量中,这将成为您在按钮中设置的唯一属性
<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>
这里是解决这个问题的一个更简单的方法,您只需将书籍的内容保存在一个变量中,该变量由book的id表示,它将成为您在按钮中设置的唯一属性
<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>
JSON呢?将书籍数据的JSON表示保存在一个
data-
属性中,然后从那里读取并解析JSONJSON.parse(…)
Oh好的。我不是Javascript方面的专家,所以我没有想到这一点。我会努力学习并应用你说的。JSON呢?将书籍数据的JSON表示保存在一个data-
属性中,然后从那里读取并解析JSONJSON.parse(…)
Oh好的。我不是Javascript方面的专家,所以我没有想到这一点。我将尝试学习并应用您所说的。在我修复了一些打字错误并将book变量设置为appVariables.books[id][0]
后,您的方法奏效了。谢谢您可以使用$books->keyBy('id')将解决方案更改为appVariables。books[id](最后将删除[0])在我修复了一些打字错误并将book变量设置为appVariables.books[id][0]
后,您的方法奏效了。谢谢您可以使用$books->keyBy('id')将解决方案更改为appVariables.books[id](最后将删除[0])
<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>
<script>
var appVairiables = {};
appVariables.books = {!! $books->groupBy('id') !!};
//output result will be like
// books = {
// 1 : {
// id : 1,
// author : "author1"
// ..
// },
// 3 : { .. }, 4 : { ... }
//}
</script>
$(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)
})
});