0

我正在使用 Laravel 8 制作一个 todo 应用程序。下面是我用于编辑数据的刀片模板。

   <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th style="display: none;"></th>
                        <th class="text-center">Tasks</th>
                        <th class="text-center">Action</th>

                    </tr>
                </thead>
                <tbody>
                    @php
                        $i = 1;
                    @endphp 
                     @foreach ($tasks as $task)
                        <tr>
                            <td class="text-center">{{ $i }}</td>
                            <td style="display: none;">{{ $task->taskId }}</td>
                            <td class="text-center">{{ $task->taskName }}</td>
                            <td>
                                <div class="row">
                                    <div class="col-md-3">
                                        <form method="POST">
                                            <input type="hidden" name="taskId" value="{{ $task->taskId }}">
                                            <button class="btn btn-primary" type="submit" name="deleteTask">Delete</button>
                                        </form>
                                    </div>
                                    <div class="col-md-3">
                                        <form method="POST">
                                            <input type="hidden" name="taskId" value="{{ $task->taskId }}">
                                            <button class="btn btn-primary editTaskButton" type="button" name="editTask" data-toggle="modal" data-target="#editTask">Edit</button>
                                        </form>
                                        <div class="modal fade" id="editTask" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editTask">Edit Tasks</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="card ">
                                                            <div class="card-body">
                                                                <form method="POST" action="/tasks/{{ $task->taskId }}">
                                                                    @csrf
                                                                    @method('PUT')
                                                                    <input type="hidden" name="taskId" id="taskId" value="{{ $task->taskId }}">
                                                                    <div class="form-group">
                                                                        <label>Enter Task</label>
                                                                        <input type="text" class="form-control" id="taskName" name="taskName">
                                                                    </div>
                                                                    <button type="submit" class="btn btn-primary" name="updateTask">Update Task</button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @php $i++; @endphp 
                    @endforeach
                </tbody>
            </table>

刀片模板基本上是一个使用模式编辑数据的数据表。当我单击编辑按钮时，会出现编辑表单并带上要编辑的数据。但是一旦我按下更新按钮，只有第一行的数据会被更新。下面是我检索数据的脚本

<script>
$(document).ready(function() {
    $('.editTaskButton').on('click', function() {
        $('#editTask').modal('show');
        $tr = $(this).closest('tr');

        var data = $tr.children("td").map(function() {
            return $(this).text();
        }).get();
        $('#taskId').val(data[1]);
        $('#taskName').val(data[2]);
    });
});
该脚本正在正确获取数据，但仅更新表的第一条记录。我正在使用资源控制器和路由器。以下是控制器和路由的代码 
 public function update(Request $request, $id)
{

    $tasks = Task::where('taskId',$id)
            ->update([
                'taskName'=>$request->input('taskName')
    ]);
   
    
    return redirect('/tasks');
}

路线：

Route::resource('/tasks', TasksController::class);

所以我想要一些关于我在哪里犯错的指导。这整个事情是一页应用程序。

4

2 回答 2

0

这里的问题是您的模态在 foreach 循环内，并且您的 javascript 代码总是打开第一个模态（在具有相同 HTML id 属性的 x 模态中），其中填充了来自您的第一个$task. 这意味着您的表单提交 URL 将始终是您的第一个$task->taskId。

建议的解决方案：将您的模态移出 foreach 循环，保留您的 javascript 代码，但在打开模态时还要通过您的 javascript 更新您的表单提交 URL（操作）。

于 2021-10-18T19:21:51.497 回答
0

如果我正确理解了这个问题，您想批量编辑 DOM 中的所有 taskName 字段，然后将更改保存到数据库中。

您的代码有几个问题，但您可以尝试用以下代码替换相关代码段：

<div class="modal-body">
    <div class="card ">
        <div class="card-body">
            <form method="PUT" action="/tasks/update">
                @csrf                                                                    
                <input type="hidden" name="taskId[]" id="taskId-{{$i}}" value="{{ $task->taskId }}">
                <div class="form-group">
                    <label>Enter Task</label>
                    <input type="text" class="form-control" id="taskName" name="taskName[]">
                </div>
                <button type="submit" class="btn btn-primary" name="updateTask">Update Task</button>
            </form>
        </div>
    </div>
</div>

由于您在循环中发送 ID，因此您需要发送一个 taskId 和 TaskName 数组。现在，您正在发送许多具有相同名称的输入，而表单只接收第一个。请注意，每个元素的 id 必须对 DOM 是唯一的。这就是为什么我在 id 属性中添加了您已经在使用的 $i 变量。最后，将表单的端点更改为通用 /update，因为您将遍历控制器中的 id。

然后在控制器中，您将需要接收这些数组并相应地更新：

public function update(Request $request)
{

    $ids[] = $request->taskId;
    $taskNames[] = $request->taskName;
    $i = 0;

    foreach($ids as $id)
    {
        $tasks = Task::where('taskId',$id)
                ->update([
                    'taskName'=>$taskNames[$i]
        ]);
        $i++;
    }   
    
    return redirect('/tasks');
}

试试这个，看看它是否适合你。

于 2021-10-18T20:02:06.750 回答