У меня есть 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
запросе на добавление, после первого добавления записи происходит ошибка, но записи все равно добавляются.
Перезагрузка страницы после отправки формы, это поведение браузера по умолчанию. Оно работает когда внутри тега form находится <button type="submit">
Чтобы страница не перезагружалась используйте либо
<button type="button"></button>
либо внутри обработчика отмените событие вызвав
event.preventDefault();
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Задача: написать функцию, которая принимает строку скобок, и определить, является ли порядок скобок действительным['(',')'] - это действительный...
Перечитал много раз ответы на вопрос Почему появляется ошибка undefined?