Модальная форма начальной загрузки для определенного идентификатора строки

Question

Попытка объединить два урока, чтобы получить один вывод.Первый - Laravel 5.7 CRUD (Create Read Update Delete) Пример учебника

Теперь я изменил основной макет и борюсь с одной проблемой.

Мой основной макет выглядит следующим образом: Режим дизайна моего экрана

Итак, код для генерации этой таблицы показан ниже

@foreach ($products as $product)
<tbody>
    <tr>
        <td>
            <span class="custom-checkbox">
                <input type="checkbox" id="checkbox1" name="options[]" value="1">
                <label for="checkbox1"></label>
            </span>
        </td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->detail }}</td>
        <td>
            <a href="#editEmployeeModal"  class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
            <a href="#deleteEmployeeModal"  class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
        </td>
    </tr>

</tbody>
@endforeach

И нижепоказан код, который показывает мою модальную форму «Редактировать».Но главная проблема здесь в том, что я всегда показываю один и тот же, независимо от того, какую строку я выбираю

 <div id="editEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('products.update',$product->id) }}" method="POST">
            @csrf
            @method('PUT')

                <div class="modal-header">                      
                    <h4 class="modal-title">Edit Product</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <div class="form-group">
                        <label>Product number</label>
                        <input type="text" value="{{ $product->product_number }}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" value="{{ $product->name }}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Detail</label>
                        <textarea class="form-control" required>{{ $product->detail }}</textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-info" value="Save">
                </div>
            </form>
        </div>
    </div>
</div>

В исходном коде: редактирование макета происходило так

<a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>

Answer 1

Да, мы можем открыть конкретный модал по "id" этого модала с помощью функции jquery: как показано ниже.

$('#id-row').showModal();

Answer 2

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

 <a href="#editEmployeeModal"  class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
 <a href="#deleteEmployeeModal"  class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>

Каждый раз, когда вы снова и снова вызываете один и тот же модал с одной и той же информацией. Вы можете использовать другую страницу для визуализации формы, так проще. Просто создайте 1 страницу для каждой функции CRUD и вызовите ее внутри цикла.

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

Вот учебник, который может вам помочь: https://medium.com/justlaravel/ajax-crud-operations-in-laravel-9def2483e1af