Разбор данных из цикла в модальный в одном и том же виде всегда получает последние данные

Question

Я хочу отправить мои данные из цикла, чтобы показать некоторые детали в модальном.Но модал всегда получает последнее значение из цикла.

<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>

И это модал, чтобы показать детали

<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">&times;</span>
            </button>
        </div>
        <div class="modal-body edit-content">
            <h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
        </div>
    </div>
</div>

Answer 1

Вы можете сделать это с помощью Jquery легко. В вашей кнопке добавьте пользовательский атрибут, как вы уже сделали, data-item="{{ $data->kodeNota }}", но вместо того, чтобы отправить одно значение, отправьте полный объект, если вы хотите заполнить другие значения в вашем модале, как показано ниже.

<td><a data-item="{{ $data }}" class="btn btn-block details-button" data-toggle="modal" data-target="#modalDetail">Detail</a></td>

добавить функцию события в вашу модальную кнопку,

$(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

Вы можете сделать это двумя способами.

Метод 1: Получите нужный идентификатор объекта, нажмите ajax и отправьте запрос на получение данных. Разобрать / записать данные в ваше модальное тело, а затем открыть модальное.

Метод 2: This is tricky and easier but very bad approach. генерировать индивидуальные уникальные модальные для каждой строки, используя индивидуальный уникальный идентификатор.

@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">&times;</span>
            </button>
        </div>
        <div class="modal-body edit-content">
            <h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
        </div>
    </div>
</div>
@endforeach