特定行id的Bootstrap模态表单

Question

Trying to combine two tutorials to get one output. First one is Laravel 5.7 CRUD (Create Read Update Delete) Tutorial Example

Now i changed the main layout and struggle with one problem.

My main layout looks like this : Design mode of my screen

So code for generating this table is shown bellow

@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

And bellow is shown code which show my modal "Edit" form. But the major problem here it is allways showing me the same one no matter which row i pick

 <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>

On the original code: Edit layout was going like this

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

Answer 1

It's showing the same form because you have a modal that is called inside a foreach loop.

 <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>

Everytime you're calling this same modal over and over again with same information. You may use another page to render the form, its easier that way. Just create 1 page for each CRUD function and call it inside you loop.

If you need to do this using modal i recommend you using Ajax or some JS framework to help you passing information between the loop and the modal itself.

Here is a tutorial that could help you: https://medium.com/justlaravel/ajax-crud-operations-in-laravel-9def2483e1af