Parsing data from loop to modal in same view always get last data - laravel

Question

I want to send my data from a loop to show some detail in the modal. But the modal always get the last value from the loop.
<table class="table table-striped table-hover table-bordered" id="table">
<thead>
<tr>
<th>Kode Nota</th>
<th>Tanggal Transaksi</th>
<th>Nama Kosumen </th>
<th>Nomor Telpon </th>
<th>Status Transaksi</th>
</tr>
</thead>
<tbody>
#foreach($transaksi as $data)
<tr>
<td><?= $data->kodeNota?></td>
<td><?= $data->tanggalTransaksi?></td>
<td><?= $data->namaKonsumen ?></td>
<td><?= $data->noTelpKonsumen ?></td>
<td><?= $data->statusTransaksi ?></td>
<td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail">Detail</a></td>
</tr>
#endforeach
</tbody>
</table>
And this is the modal to show the detail
<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="detailModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-content">
<h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
</div>
</div>
</div>

Answer 1

You can do it using Jquery easily. In your button add custom attribute like you did already, data-item="{{ $data->kodeNota }}" but instead of send one value, send full object if you want to populate others value in your modal like below.
<td><a data-item="{{ $data }}" class="btn btn-block details-button" data-toggle="modal" data-target="#modalDetail">Detail</a></td>
add an event function in your modal button,
$(document).on('click', '.details-button', function (e) {
e.preventDefault();
var item = $(this).data('item');
// for debug purpose you can console.log(item) and can actaully see you get the item object or not.
$('#modalDetail .text-center').text(item.kodeNota);
//update if you give your label a id
$('#modalDetail #kodeNota').text(item.kodeNota);
// you can populate your other data here
$('#modalDetail .text-center-two').text(item.other_data);
}

Answer 2

You can do this two ways.
Method 1:
Get the desired object id on click send ajax request to get data. Parse / write data to your modal body and then open the modal.
Method 2:
This is tricky and easier but very bad approach. generate individual unique modal for each row by using individual unique id.
#foreach($transaksi as $data)
<tr>
<td><?= $data->kodeNota?></td>
<td><?= $data->tanggalTransaksi?></td>
<td><?= $data->namaKonsumen ?></td>
<td><?= $data->noTelpKonsumen ?></td>
<td><?= $data->statusTransaksi ?></td>
<td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail-{{$data->id}}">Detail</a></td>
</tr>
<div class="modal fade" id="modalDetail-{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="detailModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-content">
<h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
</div>
</div>
</div>
#endforeach