есть форма, создается динамический в таблице рядом Ф.И.О. выводиться из БД. в итоге таких форм с id='form_day1' у меня могут быть 25 или 35, так же кнопка с id='btn_day1'.
echo "<td>
<form action='' method='Post' id='form_day1'><input type='hidden' value='".$row['ID']."' name='studid'>
<input type='hidden' value='1' name='day'>
<div id='day1_".$row['ID']."'>
<select name='ocenka' required >
<option selected>".$row['C1']."</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='Н'>H</option>
</select>
<input type='button' id='btn_day1' value='ok' /> </div></form></td>";
Имею такой скрипт аякса
$( document ).ready(function() {
$("#btn_day1").click(
function(){
sendAjaxForm('day1', 'form_day1', 'saveocenka2.php');
return false;
}
);
});
function sendAjaxForm(day1, form_day1, url) {
$.ajax({
url: url,
type: "POST", //метод отправки
dataType: "html", //формат данных
data: $("#"+form_day1).serialize(), // Сеарилизуем объект
success: function(response) { //Данные отправлены успешно
result = $.parseJSON(response);
$('#day1_'+result.idstud).html(result.ocenka);
},
error: function(response) { // Данные не отправлены
$('#day1').html('Ошибка. Данные не отправлены.');
}
});
}
Все бы хорошо, данные отправляются и ответ (оценка) обратно приходит к клиенту, но скрипт выполняется только один раз. То есть на второй строке Иванову ставим 2ку, оценка пошла к серверу, скрипт РНР вставил в таблицу БД, вернул ответ. Теперь чтобы поставить оценку следующему человеку скрипт не работает. Работает только после обновления страницы.
Селектор jQuery по id
- $("#btn_day1")
возвращает объект-обертку, содержащую максимум один элемент, исходя из предположения, что значение атрибута id
- уникально. Замените id=...
на class=...
, а селектор - на $(".btn_day1")
.
Здесь:
data: $("#"+form_day1).serialize(),
-- тоже.
Попытаюсь доступно:
Дело в том, что когда загружается ваша страница (первоначальная), только в этот момент и тогда происходит парсинг элементов для JS. Т.е. образно порядок действий такой: вы получаете HTML, там ищутся JS скрипты, они загружаются и выполняются, если в этих скриптах есть всякие click()
то в нашем, уже полученном HTML
мы ищем объект к которому привязан этот клик и вешаем на него обработчик (У вас $("#btn_day1").click
- ищется такой id
и на него вешается обработчик).
Когда вы используете AJAX, ваш первоначальный кусок удаляется, и вы его заменяете новым, НО JS скрипты уже не выполняются (ибо как я сказал они выполняются только тогда, когда загружаются). Т.е. на новопоявившемся #btn_day1
уже ничего не весит.
Решений тут несколько:
1) Можно заново загружать JS (это дикий костыль, просто для справки).
2) Можно использовать в функцию on()
, которая есть в jquery
, но надо погуглить её использование для динамического контента, там есть тонкости использования (надо вешать его на статический элемент, либо вообще к документу).
3) Можно сделать прямой вызов функции:
Например у вас: <div id='day1_12345'>
, можно заменить на: <div id='day1_12345' onClick="sendAjaxForm('day1', 'form_day1', 'saveocenka2.php')">
. - Тогда напрямую будет происходить вызов функции, которая уже существует (после первой загрузки JS)
Попробуйте вот так, если не будет работать смотрите console, пишите.
$(this) - Представляет ссылку на объект, вызывающий текущую функцию.
.parent() - Возвращает прямого родителя, это один элемент, как параметр может получать селектор.
.find() - Поиск потомков внутри каждого элемента в текущем наборе соотвествующих элементов с фильтрацией по селектору, объекту jQuery или элементу.
.attr() - Получает/устанавливает значение атрибутов выбранных элементов.
$( document ).ready(function() {
$(document).on("click", "input[value='ok']" ,
function(){
sendAjaxForm('day1', $(this).parent().find("form").attr("id"), 'saveocenka2.php');
return false;
}
);
});
function sendAjaxForm(day1, form_id, url) {
$.ajax({
url: url,
type: "POST", //метод отправки
dataType: "html", //формат данных
data: $("#"+ form_id ).serialize(), // Сеарилизуем объект
success: function(response) { //Данные отправлены успешно
result = $.parseJSON(response);
$('#day1_'+result.idstud).html(result.ocenka);
},
error: function(response) { // Данные не отправлены
$('#day1').html('Ошибка. Данные не отправлены.');
}
});
}
Временно решил проблему путем создания уникальных id для элементов динамический с помощью PHP. пример:
echo "<script type='text/javascript' >
$( document ).ready(function() {
$('#btn_day1_".$row['ID']."').click(
//$row['ID'] берем ID студента из БД, динамический создаю скрипт, таблица тоже динамическая, там тоже создается button с id='btn_day1_123456'
function(){
sendAjaxForm('day1', 'form_day1_".$row['ID']."', 'saveocenka2.php');
return false;
}
);
});
function sendAjaxForm(day1, form_day1_".$row['ID'].", url) {
$.ajax({
url: url,
type: 'POST',
dataType: 'html',
data: $('#'+form_day1_".$row['ID'].").serialize(),
success: function(response) {
result = $.parseJSON(response);
$('#day1_'+result.idstud).html(result.ocenka);
},
error: function(response) {
$('#day1_'+result.idstud).html('Ошибка. Данные не отправлены.');
}
});
}
</script>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть необходимость получения списка счетов из какого-то текста, счет - это набор цифр длиной от 20 до 30 символовЗаранее спасибо за помощь
Это комментарий к подключению самописной CRM
Ниже приведен пример xml-сообщения которое должно быть отправлено методом POST на адрес https://anketaalfabank