У меня есть 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();
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Задача: написать функцию, которая принимает строку скобок, и определить, является ли порядок скобок действительным['(',')'] - это действительный...
Перечитал много раз ответы на вопрос Почему появляется ошибка undefined?