открытый модал с атрибутами данных не работает должным образом

Question

У меня есть этот код ниже, чтобы показать в таблице информацию о регистрации в определенном конгрессе:

@foreach($conference->registrations as $registration)
    <tr>
        <td>{{$registration->customer->name}} {{$registration->customer->surname}}</td>
        <td>{{ $registration->participants->count() }}</td>
        ...
        <td>
        <a class="btn btn-primary" id="showDetails"  data-regid="{{$registration->id}}">Details</a>
        </td>
</tr>
@endforeach

Но тогда с помощью ссылки "Подробности" нужно открыть модальный вид, который находится на этой странице, поэтому можно показать детали этой конкретной регистрации. Но так как каждая регистрация должна иметь свой собственный модал, чтобы показать его конкретные детали, я помещаю модал в foreach и добавляю регистрационный идентификатор, такой как "id =" registrationDetails - {{$ registration-> id}} ".

Но он не работает должным образом, когда в любой строке щелкает ссылка «Детали», которая не отображается.

Знаете ли вы, где проблема?

Модальный код:

<div class="modal fade"  id="registrationDetails-{{ $registration->id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">

            <!-- User that did the registration -->
            <dl>
              <dt>Name</dt>
              <dd>{{ $registration->customer->name }}</dd>
              <dt>Email</dt>
              <dd>{{ $registration->customer->email }}</dd>
            </dl>

            @foreach ($registration->participants as $participant)

            <!-- Participant N -->
            <dl>
              <dt>Name</dt>
              <dd>{{ $participant->name }}</dd>
              <dt>Surname</dt>
              <dd>{{ $participant->surname }}</dd>
              <dt>Ticket Type</dt>
              <dd>{{ $participant->ticket_type->name }}</dd>
            </dl>

            @endforeach
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="close_login_modal" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JQuery:

   @section('scripts')

    <script type="text/javascript" src="{{url('js/jquery-ui.js')}}"></script>

    <script type="text/javascript">
        $(function() {

            $(".showDetails").on("click", function () {
                alert("test");
                let regID = $(this).data('regid');
                alert(regID);

                $('#registrationDetails-'+regID).modal('show');
            });

        });

        </script>
@endsection

Answer 1

идентификаторы DOM должны быть уникальными, но у вас есть несколько #showDetail идентификаторов.

Измените его на класс:

@foreach($conference->registrations as $registration)
    <tr>
        <td>{{$registration->customer->name}} {{$registration->customer->surname}}</td>
        <td>{{ $registration->participants->count() }}</td>
        ...
        <td>
        <a class="btn btn-primary showDetails" data-regid="{{$registration->id}}">Details</a>
        </td>
</tr>
@endforeach

И

$(".showDetails").on("click", function () {
    let regID = $(this).data('regid');
    alert(regID);

    $('#registrationDetails-'+regID).modal('show');
});