CODEWITHSUNDEEP
phplaravelloopsforeachmodal-dialog
Pandu Cahyo Pangestu
Pandu Cahyo Pangestu

Reputation: 25

How to loop bootstrap modal in Laravel?

I'm trying to loop my modal. this modal is used to display the user's QR code. but I only get the first value.

this is my modal.

@foreach($siswas as $siswa)
<div class="modal fade" id="qrmodal" >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"> QR </h4>
        <button type="button" class="close" data-dismiss="modal">
          &times;
        </button>
      </div>

      <div class="modal-body">
          <div class="form-group centered" id="QR">
            {!!QrCode::size(200)->generate($siswa->nis)!!}
          </div>
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Print</button>
        <button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
      </div>
    </div>
  </div>
</div>
@endforeach

Upvotes: 0

Views: 2025

Answers (1)

katsarov
katsarov

Reputation: 1822

Your problem is that the id is not unique. But this is a bad approach. You should have only one modal and depend on the button clicked you should load the content.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // 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('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Upvotes: 2

Related Questions