How to showing Data On Modal By ID - laravel

Question

I have table data , its showing data from database .
i want to showing data with Action and its will showing Modal and data .
my view like this :
<div class="table-responsive">
<table class="table table-striped jambo_table bulk_action" id="table2">
<thead>
<tr class="headings">
<th class="column-title" style="display: table-cell;">No </th>
<th class="column-title" style="display: table-cell;">Nama Pegawai </th>
<th class="column-title" style="display: table-cell;">Lihat Data Keluarga </th>
</tr>
</thead>
<tbody>
#php
$no=0;
#endphp
#foreach ($keluarga as $i)
<tr class="even pointer">
<td class="a-center ">{{ ++$no }}</td>
<td class=" ">{{ $i->users->nama}} </td>
<td class=" "><a href="/project/d_keluarga/show-keluarga/{{$i->id}}"><button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-lg"> Show Data</button> // to showing data By Id on table
</td>
</tr>
#endforeach
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Data Keluarga</h4>
</div>
<div class="modal-body">
<h4></h4>
//here to paste data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tbody>
</table>
</div>
My Controller :
public function keluarga()
{
$keluarga = Data_keluarga::with('users')->get();
return view('admin.keluarga',['keluarga' => $keluarga ]);
}
i usually parse it like $i->name and its in another page . not in Modal .
but , how to show data in modal by id ?

Answer 1

Here's an answer for your exact question.
Add data-title="{{ $i->users->nama }}" to your button.
<button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-lg" data-title="{{ $i->users->nama }}"> Show Data</button>
Add this jQuery snippet.
$('.bs-example-modal-lg').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var title = button.data('title')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(title)
})