Модальный таргетинг на один и тот же идентификатор, независимо от того, на какого пользователя я нажимаю

Question

У меня есть стандартный forloop, который заполняет таблицу. В таблице у меня есть кнопка с названием удалить разрешение, которая заполняет модальный. Этот модал ориентирован на первого пользователя, независимо от того, на какого пользователя я нажимаю. Информация отображается просто отлично для каждого пользователя в таблице, но я получаю эту проблему для модального.

Вот код

    <tbody>
    @foreach($administrators as $administrator)
        <tr class="rowlink user_info_{!! $administrator->id!!}">
            <td>{!! $administrator->username !!}</td>
            <td>{!! $administrator->name !!}</td>
            <td><a class="maillink" href="{!! url("mailto:".$administrator->email)!!}">{!! $administrator->email !!}</a></td>
            <td>{!! $administrator->user_ip !!}</td>

            <td>
                @if($administrator->confirmed==1)
                    <label class="label label-success">Yes</label>
                @else
                    <label class="label label-danger">No</label>
                @endif
            </td>

            <td>SuperAdmin</td>
            <td class="visible-lg">{!! $administrator->created_at !!}</td>
            <td class="visible-lg">{!! $administrator->id !!}</td>
            <td>
                <a href="javascript:;" data-user='{!! $administrator->id !!}'
                   data-toggle="modal"
                   data-target="#remove_permission"
                   data-accent="alert"
                   class="atrium-button--text remove_superadmin_btn">
                   <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-delete"></use></svg>
                   <span>Remove Permission</span>
                 </a>


                <a href="{!! route('superadmins.view', $administrator->id) !!}"
                   data-accent="positive"
                   class="atrium-button--text">

                   <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-arrow"></use></svg>
                   <span>View & Edit</span>
                 </a>

                <a data-accent="primary"
                  class="atrium-button--text"
                  href="{!! route('admin.account.confirm.resend', $administrator->id) !!}">

                  <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-edit"></use></svg>
                  <span>Send Email</span>
                </a>

                <a data-accent="yellow"
                  class="atrium-button--text"
                  href="#javascript:;">

                  <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-flag"></use></svg>
                  <span>Password Help</span>
                </a>


                <div id="remove_permission" class="modal fade" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Remove Permission</h4>
                            </div>
                            <div class="modal-body">
                              <p>Are you sure you want to remove the super-admin permissions from {{ $administrator->id }}</p></br>

                                <form action="/admin/admin/superadmins/remove/{{ $administrator->id}}" method="POST">
                                  {{ csrf_field() }}
                                  {{ method_field('PUT') }}

                                  <button type="submit" class="atrium-button">
                                    <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-check"></use></svg>
                                    <span>Remove Permission</span>
                                  </button>

                                  <a class="atrium-button--subtle" data-accent="alert" data-dismiss="modal">
                                    <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-close"></use></svg>
                                    <span>Cancel</span>
                                  </a>

                                </form>

                            </div>

                        </div>

                    </div>
                </div>
            </td>
        </tr>
        @endforeach

    </tbody>
</table>

Есть идеи здесь?

Answer 1

Это потому, что у вас есть несколько моделей, но все они имеют один и тот же идентификатор, в результате чего модальным становится последний идентификатор.

Измените модальную ссылку и код модели следующим образом

<a href="javascript:;" data-user='{!! $administrator->id !!}'
  data-toggle="modal"
  data-target="#remove_permission_{{$administrator->id}}"
  data-accent="alert"
  class="atrium-button--text remove_superadmin_btn">
  <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-delete"> 
  </use</svg>
  <span>Remove Permission</span>
</a>

Модальный:

<div id="remove_permission_{{$administrator->id}}" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Remove Permission</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to remove the super-admin permissions from {{ $administrator->id }}</p></br>

        <form action="/admin/admin/superadmins/remove/{{ $administrator->id}}" method="POST">
          {{ csrf_field() }}
          {{ method_field('PUT') }}

          <button type="submit" class="atrium-button">
            <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-check"></use></svg>
            <span>Remove Permission</span>
          </button>

          <a class="atrium-button--subtle" data-accent="alert" data-dismiss="modal">
            <svg width="18" height="18" viewbox="0 0 18 18"><use xlink:href="#icon-close"></use></svg>
            <span>Cancel</span>
          </a>

        </form>

      </div>

    </div>

  </div>
</div>