时间戳

首页 > 解决方案 > Laravel 8 使用模态更新数据

modal-dialog - Laravel 8 使用模态更新数据

问题描述

最近我学习如何使用 modal.i 更新数据。我可以通过模态成功插入数据，但在此之前无法更新，当我按下编辑按钮时，我的模态弹出而没有获取数据。这是我的带有脚本的刀片文件-

<div>
    <h5 style="text-align: center">Modal Practice</h5>
</div>


{{-- ................................... --}}





<div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
        Add data 
    </button>

    {{-- @dd($alldata) --}}
    <table id="myTable" class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Common Name</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
    

        

        <tbody>
            @foreach ($alldata as $key => $data)
                <tr>
                    <th scope="row">{{ $key + 1 }}</th>
                    <td>{{ $data->first_name }}</td>
                    <td>{{ $data->last_name }}</td>
                    <td>{{ $data->common_name }}</td>
                    <td>
                        <a href="#" class="btn btn-warning btn-sm edit" data-bs-toggle="modal"
                            data-bs-target="#editModal">Edit</a>
                        <a href="#" class="btn btn-danger btn-sm">Delete</a>
                    </td>
                </tr>
            @endforeach

        </tbody>
    </table>
</div>

<!-- Add Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('savedata') }}" method="POST" class="row g-3">
                <div class="modal-body">
                    @if (session()->has('success'))
                        <div class="alert alert-success">
                            {{ session()->get('success') }}
                        </div>
                    @endif


                    @csrf


                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">First Name</label>
                        <input type="text" class="form-control" name="first_name">
                    </div>
                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">Last Name</label>
                        <input type="text" class="form-control" name="last_name">
                    </div>
                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">Common Name</label>
                        <input type="text" class="form-control" name="common_name">
                    </div>



                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- end Add modal --}}


<!-- Edit Modal -->
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="editForm" class="row g-3">
                <div class="modal-body">



                    @csrf
                    @method('put')


                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">First Name</label>
                        <input type="text" class="form-control" id="fname" name="first_name">
                    </div>
                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">Last Name</label>
                        <input type="text" class="form-control" id="lname" name="last_name">
                    </div>
                    <div class="col-md-6">
                        <label for="inputEmail4" class="form-label">Common Name</label>
                        <input type="text" class="form-control" id="cname" name="common_name">
                    </div>



                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                </div>
            </form>
        </div>
    </div>
</div>
{{-- End Edit Modal --}}




<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.jqueryui.min.js"></script>






<script type="text/javascript">
    $(document).ready(function() {
        var table =  $('#myTable').DataTable();

        table.on('click', '.edit', function() {

            $tr = $(this).closest('tr');
            if ($($tr).hasClass('child')) {
                $tr = $tr.prev('.parent');
            }

            var data = table.row($tr).data();
            console.log(data);

            $('#first_name').val(data[1]);
            $('#last_name').val(data[2]);
            $('#common_name').val(data[3]);

            $('#editForm').attr('action', '/savedata' + data[0]);
            $('#editModal').modal('show');
        });
    });
</script>

这是控制器-

public function update(Request $request,$id)
{
    $alldata = DataSave::find($id);

    $alldata->update([
        'first_name'=>$request->first_name,
        'last_name'=>$request->last_name,
        'common_name'=>$request->common_name
    ]);

    return redirect()->route('index')->with('success', 'Update Successful');;

   


}

}

这是我的路线-

Route::get('/index',[SaveController::class,'index'])->name('index');

Route::post('/save',[SaveController::class,'savedata'])->name('savedata');

标签： modal-dialog

解决方案

要获得带有获取数据的模式弹出窗口，我使用类似（看id=""）的东西：

<!-- Add Modal -->
<div class="modal fade" id="editModal{{ $id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
</div>

和模态的按钮链接应该像（看data-target=""）：

<td>
   <a href="#" class="btn btn-warning btn-sm edit" data-toggle="modal"
      data-target="#editModal{{ $id }}">Edit</a>
   <a href="#" class="btn btn-danger btn-sm">Delete</a>
</td>

推荐阅读