【发布时间】：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()。
标签： sql ajax laravel duplicates crud