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

Posted 8 months ago by adamjhn

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

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.