#sql #ajax #laravel #duplicates #crud
Вопрос:
Я использую его fetchcategory(); для обновления таблицы всякий раз, когда пытаюсь добавлять, редактировать и удалять данные. Моя проблема в том, что каждый раз, когда таблица пытается перезагрузиться, новые обновленные данные стекаются в нижней части таблицы. Старая информация остается там, где она есть. Пример показан ниже:
В моей таблице есть одна существующая запись, на втором снимке экрана показан результат после добавления новых данных.
Как вы можете видеть, мое другое состояние под add_category триггерами. самая последняя строка кода под else — » fetchcategory ();». но функция fetch simple добавляет всю новую таблицу под данными перед обновлением. То же самое касается моей функции редактирования и удаления.
Мой вопрос в том, почему таблица просто не перезагружает все это и не удаляет отображение старых данных?
Кроме того, я хочу воздержаться от использования location.reload() , потому что я не хочу, чтобы обновлялась вся веб-страница, только таблица.
АЯКС:
$(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();
}
}
});
});
});
Комментарии:
1. можете ли вы использовать код fetchcategory()
2. @JohnLobo добавил
3. Привет, просто опустоши свое тело . Просто добавляйте
$('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;
}
}
});
}
Комментарии:
1. ах, я вижу, похоже, это только из-за добавления. спасибо за предоставление еще одной ценной информации/обучения!
2. @STGSH. даже предложение swati с $(‘tbody’).empty() перед каждым также хорошо работает