Как отловить с помощью Jquery нажатия кнопки на странице и передать данные формы AJAX
Привет. Выполнял я тут один проект и столкнулся с такой ситуацией, что нужно менеджеру редактировать поля, затем если нажать на кнопку сохранить, то сразу их сохранять в БД. Вторая кнопка еще круче, при нажатии открывается новая таблица и там такой же функционал. И самое главное, чтобы все это работало без перезагрузки.
Тут два этапа, в начале отследим нажатие верхних двух кнопок, они сразу есть на странице.
$('.btn-save').click(function (e) //ищем класс на странице
{
e.preventDefault(); //если кнопка submit, то чтобы не перезагружалась страница, отменяет действия по умолчанию
let row = $(this).parent().parent(); //т.е. мы нашли .btn-save это кнопка, и нужно получить все инпуты, переходим к родителю.
let str = ''; // для хранения полученных данных
row.find('input,select').each(function () //ищем инпуты и силекты и перебираем их
{
if(!$(this).hasClass('btn')){ //если внутри нет класса btn
console.log($(this).prop('name')); //для отладки получим все атрибуты name
if (str != '') // если str пустой
{
str += '&'; //добавить и
}
str += $(this).prop('name')+'='+$(this).prop('value'); //конкатенируем строку, получили атрибут name и его значения, значения получаем при помощи prop
}
})
$.ajax({ //отправляем данные на сервер.
type: 'POST',
url: 'customerEdit.php',
data: str,
async: false,
dataType: "html",
success: function (data)
{
$('#message').html('<p id="message" class="alert alert-success my-3">Данные успешно сохранены в базе данных</p>');
// console.log(data);
}
});
});
Со второй кнопкой все то же самое, только название класса меняется и кода меньше, т.к. нужно получить только id, чтобы в пхп уже сделать запрос в БД и вывести табличку покупок по этому ID.
//для показа списка товаров
$('.btn-list').click(function (e)
{
e.preventDefault();
let id = $(this).prop('name');
$.ajax({
type: 'POST',
url: 'customerEdit.php',
data: 'id_=' + id,
async: false,
dataType: "html",
success: function (data)
{
$('#message').html('<p id="message" class="alert my-3">' + data + '</p>');
// console.log(data);
}
});
});
Динамические данные
А вот затем нужно отредактировать эту табличку и я курил много интернет, пока не узнал как это сделать, дело в том что первоначально этого Html на странице нет и jqvery его не видит, а чтобы видел нужно использовать следующею конструкцию.
$(document).on('click touchstart', '.selector', function(){
....
}
Ловит все события как на телефоне так и на ПК, кроссбраузерно кроссплатформенно.
Пример моего кода.
//Сохраняем правки товара
$(document).on('click','.btn-data-id',function (e)
{
e.preventDefault();
let row = $(this).parent().parent();
let str = '';
row.find('input').each(function ()
{
if(!$(this).hasClass('btn')){
// console.log($(this).prop('name'));
if (str != '')
{
str += '&';
}
str += $(this).prop('name')+'='+$(this).prop('value');
}
})
$.ajax({
type: 'POST',
url: 'customerEdit.php',
// data: {data_id: id, product_id: product_id}, str,
data: str,
async: false,
dataType: "html",
success: function (data)
{
$('#message1').html('<p id="message" class="alert alert-success my-3">Данные успешно сохранены в базе данных</p>');
console.log(data);
}
});
});
Код в принципе ничем не отличается кроме первой строчки. Всем у спехов!




