Вызов модального при нажатии кнопки - PullRequest
Новая
       30

Вызов модального при нажатии кнопки

0 голосов
/ 10 января 2019

В таблице отображаются имя, комментарий и кнопка редактирования для каждого элемента, возвращенного из моей коллекции элементов. При нажатии кнопки «Изменить» должна быть вызвана модальная форма для обновления элемента.

Выпуск

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

Предметы Таблица списка 

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

Модальные 

<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>

1 Ответ

0 голосов
/ 10 января 2019

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

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>
...