У меня есть ui с помощью которого я могу удалять, редактировать, добавлять записи в бд. На главной странице просто таблица с соответствующими кнопками для действия. Запросы посылаю на REST контроллер, который и определяет что и как будет выполняться. Все методы запроса к контроллеру я осуществляю через jquery с помощью метода $.ajax
. Все действия выполняются, но происходит перезагрузка страницы, если удаляю, добавляю или редактирую данные, после отправки данных с формы, страница перезагружается, а я хочу сделать так, чтобы отрисовывалась заново только таблица, а не перезагружалась вся страница.
Вот скрипт, который за все это отвечает:
$(document).ready(function() {
var table = $('table');
var loadDataFromDB =$.ajax({
type: "GET",
url: LIST_PRODUCTS,
dataType: "json",
async: true,
success: function (result) {
for(var i in result) {
var str = "<tr>";
for(var prop in result[i]){
str += "<td>" + result[i][prop] + "</td>";
}
str += "<td><a href='/' data-id='" + result[i].id + "' class='delete'>удалить</a></td>";
str += "<td><a href='/' data-id='" + result[i].id + "' class='edit'>редактировать</a></td>";
str += "</tr>";
table.append(str);
}
},
error: function () {
alert("Exception on out");
}
});
$(document).on('click', '.delete', function () {
var row = $(this).closest('td').parent();
console.log($(this).attr("data-id"));
$.ajax({
type: "DELETE",
url: LIST_PRODUCTS + "/delete/" + $(this).attr("data-id"),
async: true,
done: function () {
loadDataFromDB();
}
});
});
$('#form').submit(function () {
sendAjaxForm();
console.log(response);
});
function sendAjaxForm() {
var DATA = {
name: $("#name").val(),
description: $("#description").val(),
create_date: $("#create_date").val(),
place_storage: $("#place_storage").val(),
reserved: $("#reserved").val()
};
$.ajax({
url: LIST_PRODUCTS + "/create",
type: "POST",
/*data: $('#form').serialize(),*/
data: JSON.stringify(DATA),
dataType: "json",
contentType:"application/json; charset=utf-8",
async: true,
success: function (response) {
loadDataFromDB();
}
});
}
Код редактирования я еще не дописал, но он будет аналогичен добавлению. loadDataFromDB
эта переменная js, как я задумал, должна отрабатывать, после каждого действия(добавления/удаления/редактирования). Но она не отрабатывает нигде. Я написал ее в секциях done/success
, но там она не срабатывает. И если дописать секцию error
в ajax
запросе на добавление, после первого добавления записи происходит ошибка, но записи все равно добавляются.