How to get the id of the registrations that are dynamic in jQuery?

I have this code below to show in a table info about registrations in a specific congress:

@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">Details</a>
        </td>
</tr>
@endforeach

But then with the "Details" link is to open a modal that it is in this page so is possible to show the details of that specific registration.

But since each registration needs to have its own modal to show its specific details I put the modal inside the foreach and add registration id like "id="registrationDetails-{{ $registration->id }}".

But its not working properly when the "Details" link is clicked in any row the modal dont appears.

The issue shoudl be because then is necessary to in jQuery get the correct id, which is dynamic because it has the id of each registration: "id="registrationDetails-{{ $registration->id }}".

Do you know how this can be achived, how to get the correct registration id in jQuery?

The modal code:

<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 () {
    $('#registrationDetails').modal('show');
    });
});
</script>
@endsection

Cronix

8 years ago

Best Answer

Level 67

The same way I helped you with something similar awhile back. Add a data attribute to the button with the id and then get it when the button is clicked and the modal opens. This is also explained in the docs for the modal.

Are you saying you're creating a modal in a loop? That's kind of crazy. There should just be one modal and change the values of it when opened.

1 like

adamjhn

8 years ago

Level 3

Thanks!

Something like this?

Link:

<a class="btn btn-primary" id="showDetails"  data-regid="{{$registration->id}}">Details</a>

$(function() {

            $("#showDetails").on("click", function () {

                let regID = $(this).data('regid');
                 alert(regID);

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

            });

        });

Like that when the Details link is clicked the modal dont open. But any error appear. Do you know why?

The alert shows the correct id.

Please or to participate in this conversation.