....
<tbody>
@foreach ($tasks as $task)
<tr>
<td>{{$task->id}}</th>
<td>{{$task->project_id}}</td>
<td>{{$task->t_title}}</td>
<td>
<a href="#" class="editbtn btn btn-success ">EDIT </a>
<a class="btn btn-success">DELETE </a> </td>
</tr>
@endforeach
<form id="editFormID">
<div class="modal-body">
@CSRF
{{method_field('PUT')}}
<input type="hidden" name="id" id="id">
<div class="form-group">
<label>Project ID</label>
<input type="text" name="project_id" id="project_id" class="form-control">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" name="t_title" id="t_title" class="form-control" > ...
$(document).ready(function () {
$('.editbtn').on('click', function() {
$('#studenteditmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#id').val(data[0]);
$('#project_id').val(data[1]);
$('#t_title').val(data[2]);
});
$('#editFormID').on('submit', function(e) {
e.preventDefault();
var id= $('#id').val();
$.ajax({
type: "PUT",
url: "/studentupdate/"+id,
data: $('#editFormID').serialize(),
success: function(response) {
console.log(response);
$('#studentEditModal').modal('hide');
alert("Data Updated");
},
error: function(error) {
console.log(error);
}
});
});
});
提交后,jquery更新了数据库中的数据,而不需要重新加载页面,但要在表中看到数据,我需要重新加载页面。
我想在不重载的情况下看到表中的数据。这个想法可能是
在提交之后 -> 从编辑表单中获取ID (2) -> 在表(1)中找到带有该ID的行 -> 并更新project_id和t_title单元格。
我如何实现它?
你有2个选项
一个困难的(也是理想的)。
一个简单的方法, 就是在你的Laravel应用程序中写一个API来通过ID获取记录并更新表中的记录:
以下是简单方法所需要的改动:
<tbody>
@foreach ($tasks as $task)
<tr id="TaskNo{{ $task->id }}">
<td class="id">{{$task->id}}</th>
<td class="project_id">{{$task->project_id}}</td>
<td class="t_title">{{$task->t_title}}</td>
<td>
<a href="#" class="editbtn btn btn-success ">EDIT </a>
<a class="btn btn-success">DELETE </a> </td>
</tr>
@endforeach
在父表中添加ID以识别唯一的行。
在Jquery中更新行
...
success: function(response) {
console.log(response);
$('#studentEditModal').modal('hide');
$('#TaskNo'+ id +' .id').html($('#id').val());
$('#TaskNo'+ id +' .project_id').html($('#project_id').val());
$('#TaskNo'+ id +' .t_title').html($('#t_title').val());
alert("Data Updated");
},
...
应该可以了