Katakanlah kita ingin menampilkan informasi detail tentang suatu data yang akan ditampilkan dengan modal bootstrap. Modal tersebut dipicu melalui sebuah tombol yang sekaligus akan membawa data spesifik misal id dari sekumpulan data yang telah ditampilkan. Berikut langkah-langkahnya
- Buat variabel dari data yang akan di render ke view melalui controller : $contact = Contact::filter(request('search'))->orderBy('id', 'desc')->paginate(10);
- Dalam view buat tombol pemicu modal yang telah disisipkan data terkait yang akan ditampilkan melalui modal:
<a href="#" class="detail btn btn-icon btn-xs btn-info" data-toggle="modal"
data-target="#exampleModal"
data-id="{{ $data->id }}"
data-name="{{$data->name}}"
data-contact="{{$data->contact}}"
data-created="{{$data->created_at}}"
data-message="{{$data->message}}"
data-feedback="{{$data->feedback}}"
data-tracking_code="{{$data->tracking_code}}"
>
<i class="fas fa-info-circle" title="Detail"></i>
</a>
tampilan data lengkapnya tinggal disesuaikan dengan menggunakan tabel.
- Tambahkan kode ajax untuk menangani data tadi sebelum di tampilkan ke modal :
<script>
$(document).on('click', '.detail', function (e) {
let name = $(this).data('name');
let id = $(this).data('id');
let contact = $(this).data('contact');
let created= $(this).data('created');
let message = $(this).data('message');
let feedback = $(this).data('feedback');
let tracking_code = $(this).data('tracking_code');
$('.title').text(name);
$('.name').text(name);
$('.contact').text(contact);
$('.created').text(created);
$('.message').text(message);
$('.feedback').text(feedback);
$('.tracking_code').text(tracking_code);
})
</script>
- Modal :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="title modal-title" id="exampleModalLabel">
</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body text-left">
<table>
<tr>
<td>Name</td>
<td>:</td>
<td class="name"></td>
</tr>
<tr>
<td>No Hp</td>
<td>:</td>
<td class="contact"></td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td class="created"></td>
</tr>
<tr>
<td>Message</td>
<td>:</td>
<td class="message"></td>
</tr>
<tr>
<td>Your Feedback</td>
<td>:</td>
@if (!empty($data->feedback))
<td>N/A</td>
@else
<td class="feedback"></td>
@endif
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Data yang ditampilkan modal akan mengikut pada tombol yang membawa data melalui ajax.
