Pass data to modal in the same page, Laravel - php

Question

So i have this index page which has the list of task and inside the table is the title of task and the actions, what i'm trying to do is when i click the task title the modal will pop whereas in the modal is its body and content of the said task.. here is the code
controller
public function index()
{
$posts = Post::orderBy('created_at', 'desc')->paginate(10);
return view('posts.index')->with('posts', $posts);
}
index page
#extends('layout.app')
#section('content')
<div class="container">
<div class="col-md-6" style="float:left;">
<h2>Todo List</h2>
<div class="table-hover">
<table class="table">
<thead class="thead-default">
<tr>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if(count($todos) > 0)
#foreach($todos as $todo)
<tr>
<th>{{$todo->title}}</th>
<td>{{$todo->status}}</td>
<td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
</tr>
</tbody>
#endforeach
#else
<th><h2>Nothing to show</h2></th>
#endif
</table>
</div>
</div>
the modal below the same page
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label">View task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{$todo->title}}</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>

Answer 1

There are two methods to achieve this, either you repeat your modal with unique id with tr or records, or you create one modal, and onClick bring data from ajax or javascript, and fill it within modal.
I'm explaining you the first and easiest one
#extends('layout.app')
#section('content')
<div class="container">
<div class="col-md-6" style="float:left;">
<h2>Todo List</h2>
<div class="table-hover">
<table class="table">
<thead class="thead-default">
<tr>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if(count($todos) > 0)
#foreach($todos as $todo)
<tr>
<th>{{$todo->title}}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label{{ $loop->iteration }}">View task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{$todo->title}}</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</th>
<td>{{$todo->status}}</td>
<td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
</tr>
</tbody>
#endforeach
#else
<th><h2>Nothing to show</h2></th>
#endif
</table>
</div>
</div>