Выбор пользователя для подтверждения удаления (laravel)

Question

Доброе утро,

Я хочу создать диалоговое окно, которое просит меня подтвердить удаление пользователя, но я не могу указать подходящего пользователя, когда я нажимаю «удалить», он пытается удалить первый пользователь из моей таблицы.

Users / index.blade. php

@section('tableHeader')
    <th class="align-middle">ID</th>
    <th class="align-middle">Avatar</th>
    <th class="align-middle">Pseudo</th>
    <th class="align-middle">Nom et Prénom</th>
    <th class="align-middle">Age</th>
    <th class="align-middle">Email</th>
    <th class="align-middle">Date D'Inscription</th>
    <th class="align-middle">Actions</th>
@endsection

@section('tableData')
    @foreach($users as $user)
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Supprimer {{ $user->pseudo }} ?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <a href="{{ route('adminUserDestroy' , $user->id) }}"><button class="btn btn-outline-danger">Supprimer</button></a>
                        </div>
                    </div>
                </div>
            </div>
        <tr>
            <td class="align-middle">{{ $user->id }}</td>
            <td class="align-middle">
                <img src="{{ asset( 'storage/' . $user->avatar ) }}" height="50" width="50">
            </td>
            <td class="align-middle">{{ $user->pseudo }}</td>
            <td class="align-middle">{{ $user->lastName }} {{ $user->firstName }}</td>
            <td class="align-middle">{{ $user->age }} ans</td>
            <td class="align-middle" style="max-width: 14vw; overflow: scroll; overflow: -moz-hidden-unscrollable;">{{ $user->email }}</td>
            <td class="align-middle">{{ $user->created_at }}</td>
            <td class="align-middle" style="min-width: 12vw">
                <a href="{{ route('adminUserShow' , $user->id) }}"><button class="btn btn-outline-primary m-1">Voir Plus</button></a>
                <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal">Supprimer</button>
                {{--                <a href="{{ route('adminUserDestroy' , $user->id) }}"><button class="btn btn-outline-danger">Supprimer</button></a>--}}
            </td>
        </tr>
    @endforeach
@endsection

@section('paginate')
    {{ $users->links() }}
@endsection

Я не могу дождаться, чтобы увидеть ваши ответы! = D

Answer 1

Обновлено по вашему требованию

Как это работает, вы не используете bootstrap data-toggle="modal" data-target="#exampleModal"

Вы добавляете пользовательский атрибут данных что-то вроде data-user-id="{{ $user->id }}"

Также переместите модал за пределы l oop. Используйте один модальный режим и установите идентификатор пользователя с помощью jquery.

Пример:

<button data-user-id="{{ $user->id }}" type="button" class="btn btn-outline-danger deleteUser">Supprimer</button>

добавлен deleteUser класс для применения jquery события клика на нем.

Затем вы выбираете идентификатор пользователя на jquery и назначаете в любое место, которое хотите назначить

Пример:

$('.deleteUser').click(function(){
   let userID = $(this).data('user-id');

   // use the userId and assign it
   // add id="deleteBtn" to your delete button as well
   let deleteURL = "{{ route('adminUserDestroy' , ':id') }}";
   deleteURL = deleteURL.replace(':id', userID);
   $('#deleteBtn').attr('href', deleteURL);

   $('#exampleModal').modal('show'); // this will open the modal.
})

Answer 2

Итак, вы делаете рендеринг модальных для каждой записи в вашей коллекции $user:

@foreach ($users as $user)
    <!-- Create a modal -->
@endforeach

Но каждый модал имеет один и тот же идентификатор exampleModal. Поэтому независимо от того, на какую кнопку вы нажимаете, он выберет первый модал с id, найденным в DOM.

. Попробуйте использовать один модал со свойствами data, введенными кнопкой, когда это щелкнуло. (см. ответ Ахзара Джаведа)