我正在使用 Laravel 8 制作一個待辦事項應用程式。以下是我用于編輯資料的刀片模板。
<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 hljs-string">" type="submit" name="deleteTask">Delete</button>
</form>
</div>
<div hljs-number">3">
<form method="POST">
<input type="hidden" name="taskId" value="{{ $task->taskId }}">
<button hljs-string">" 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">×</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 hljs-string">">
<label>Enter Task</label>
<input type="text" hljs-string">" id="taskName" name="taskName">
</div>
<button type="submit" hljs-string">" name="updateTask">Update Task</button>
</form>
</div>
</div>
</div>
<div hljs-string">">
<button type="button" hljs-string">" 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);
所以我想要一些關于我在哪里犯錯的指導。這整個事情是一頁應用程式。
uj5u.com熱心網友回復：
這里的問題是您的模態在 foreach 回圈內，并且您的 javascript 代碼總是打開第一個模態（在 x 模態中具有相同的 HTML id 屬性），其中填充了您的第一個$task. 這意味著您的表單提交 URL 將始終是您的第一個$task->taskId.
建議的解決方案：將您的模態移到 foreach 回圈之外，保留您的 javascript 代碼，但在打開模態時也要通過您的 javascript 更新您的表單提交 URL（操作）。
uj5u.com熱心網友回復：
如果我正確理解了這個問題，您想批量編輯 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 hljs-string">">
<label>Enter Task</label>
<input type="text" hljs-string">" id="taskName" name="taskName[]">
</div>
<button type="submit" hljs-string">" 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');
}
試試這個，看看它是否適合你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/322923.html