Laravel/Ajax：刷新表格将新数据堆叠在底部（旧数据保留）
Posted
技术标签:
【中文标题】Laravel/Ajax：刷新表格将新数据堆叠在底部（旧数据保留）【英文标题】：Laravel/Ajax: refreshing the table stacks the new data at the bottom (old data stays) 【发布时间】：2021-09-08 20:40:40 【问题描述】：我使用fetchcategory(); 来在我尝试添加、编辑和删除数据时刷新我的表。我的问题是，每次表尝试重新加载时，新更新的数据都会堆积在表的底部。旧信息留在原处。示例如下：
我的表有一条现有记录，第二张截图显示了我添加新数据后的结果。
如您所见，add_category 下的 else 条件触发。 else 下的最后一行代码是 `fetchcategory();'。但是 fetch simple 会在更新前将整个新表添加到数据下方。我的编辑和删除功能也是如此。
我的问题是为什么表格不只是重新加载整个东西并取消旧数据的显示？
另外，我想避免使用location.reload()，因为我不想刷新整个网页，只刷新表格。
AJAX：
$(document).ready(function ()
fetchcategory();
function fetchcategory()
$.ajax(
type: "GET",
url: "/clinical/bbr-category-configuration-data",
dataType: "json",
success: function (response)
$.each(response.all_categories, function (key, cat)
$('tbody').append(`
<tr>
<td><p class="font-weight-bold mb-0">$cat.category_name</p>$cat.category_description</td>
<td>View:
<mark class="mark-orange">$gettype(cat.config_view_type)</mark>
<br>Edit:
<mark class="mark-orange">$gettype(cat.config_edit_type)</mark>
</td>
<td>View:
<mark class="mark-orange">$gettype(cat.bbrmode_view_type)</mark>
</td>
<td>
<button type="button" value="$cat.category_id" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
<button type="button" value="$cat.category_id" class="delete_category btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
</td>
</tr>`);
);
function gettype(type)
var c_type = '';
if (type == 'P')
c_type = 'Public'
else if (type == 'R')
c_type = 'Restricted'
else if (type == undefined)
c_type = 'N/A'
return c_type;
);
$(document).on('click', '.delete_category', function (e)
e.preventDefault();
//click this button(delete_category) to get the value(category_id)
var cat_id = $(this).val();
// alert(cat_id);
$('#delete_cat_id').val(cat_id);
$('#deleteCategoryModal').modal('show');
);
$(document).on('click', '.delete_category_btn', function (e)
e.preventDefault();
var cat_id = $('#delete_cat_id').val();
alert('Category Deleted!');
$('#deleteCategoryModal').modal('hide');
fetchcategory();
//token taken from laravel documentation
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
$.ajax(
type: "DELETE",
url: "/clinical/bbr-category-configuration-delete/"+cat_id,
dataType: "dataType",
);
);
$(document).on('click','.edit_category',function (e)
e.preventDefault();
var cat_id = $(this).val();
console.log(cat_id);
$('#editCategoryModal').modal('show');
$.ajax(
type: "GET",
url: "/clinical/bbr-category-configuration-edit/"+cat_id,
success: function (response)
console.log(response);
if(response.status == 404)
$('#success_message').html("");
$('#success_message').addClass('alert alert-danger');
$('#success_message').text(response.message);
else
$('#edit_category_name').val(response.category_edit.category_name);
$('#edit_category_description').val(response.category_edit.category_description);
$('#edit_cat_id').val(response.category_edit.category_id);
);
);
$(document).on('click', '.update_category', function (e)
e.preventDefault();
var cat_id = $('#edit_cat_id').val();
var update_data =
'category_name' : $('#edit_category_name').val(),
'category_description' : $('#edit_category_description').val(),
//token taken from laravel documentation
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
$.ajax(
type: "POST",
url: "/clinical/bbr-category-configuration-update/"+cat_id,
data: update_data,
dataType: "json",
success: function (response)
// console.log(response);
if(response.status == 400)
$('#category_formCheckUpdate').html("");
$('#category_formCheckUpdate').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values)
$('#category_formCheckUpdate').append('<li>'+err_values+'</li>');
);
else if(response.status == 404)
$('#category_formCheckUpdate').html("");
$('#category_notif').addClass('alert alert-success');
$('#category_notif').text(response.message);
else
$('#category_formCheckUpdate').html("");
$('#category_notif').html("");
$('#category_notif').addClass('alert alert-success');
$('#category_notif').text(response.message);
$('#editCategoryModal').modal('hide');
fetchcategory();
);
);
$(document).on('click', '.add_category', function(e)
e.preventDefault();
var category_data =
'category_name': $('.category_name').val(),
'category_description': $('.category_description').val(),
'category_description': $('.category_description').val(),
'config_view_type': $('.config_view_type').val(),
'config_edit_type': $('.config_edit_type').val(),
'bbrmode_view_type': $('.bbrmode_view_type').val(),
//token taken from laravel documentation
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
$.ajax(
type: "POST",
url: "/clinical/bbr-category-configuration",
data: category_data,
dataType: "json",
success: function (response)
console.log(response);
if(response.status == 400)
$('#category_formCheck').html("");
$('#category_formCheck').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values)
$('#category_formCheck').append('<li>'+err_values+'</li>');
);
else
$('#category_notif').html("");
$('#category_notif').addClass('alert alert-success');
$('#category_notif').text(response.message);
$('#createCategory').modal('hide');
fetchcategory();
);
);
);
【问题讨论】：
你能不能给fetchcategory()的代码 @JohnLobo 已添加 您好，只需清空您的 tbody 即可。只需在每个循环之前添加$('tbody').empty()。
【参考方案1】：
你可以避免使用$('tbody').html()而不是$('tbody').append(在底部追加
function fetchcategory()
$.ajax(
type: "GET",
url: "/clinical/bbr-category-configuration-data",
dataType: "json",
success: function (response)
var tbody="";
$.each(response.all_categories, function (key, cat)
tbody+=`
<tr>
<td><p class="font-weight-bold mb-0">$cat.category_name</p>$cat.category_description</td>
<td>View:
<mark class="mark-orange">$gettype(cat.config_view_type)</mark>
<br>Edit:
<mark class="mark-orange">$gettype(cat.config_edit_type)</mark>
</td>
<td>View:
<mark class="mark-orange">$gettype(cat.bbrmode_view_type)</mark>
</td>
<td>
<button type="button" value="$cat.category_id" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
<button type="button" value="$cat.category_id" class="delete_category btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
</td>
</tr>`;
);
$('tbody').html(tbody)
function gettype(type)
var c_type = '';
if (type == 'P')
c_type = 'Public'
else if (type == 'R')
c_type = 'Restricted'
else if (type == undefined)
c_type = 'N/A'
return c_type;
);
【讨论】：
啊，我明白了，看起来只是因为附加。感谢您提供另一个有价值的信息/教学！ @STGSH。甚至在每个之前使用 $('tbody').empty() 的斯瓦蒂建议也很有效以上是关于Laravel/Ajax：刷新表格将新数据堆叠在底部（旧数据保留）的主要内容，如果未能解决你的问题，请参考以下文章
405 方法不允许，PATCH 不工作。 Laravel、Ajax、Jquery、引导模式
Laravel/Ajax：在 ajax 函数中使用类/id 来调用表格内容而不是标签