Почему AJAX выполняется только один раз?

180
08 февраля 2019, 12:10

есть форма, создается динамический в таблице рядом Ф.И.О. выводиться из БД. в итоге таких форм с 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ку, оценка пошла к серверу, скрипт РНР вставил в таблицу БД, вернул ответ. Теперь чтобы поставить оценку следующему человеку скрипт не работает. Работает только после обновления страницы.

Answer 1

Селектор jQuery по id - $("#btn_day1") возвращает объект-обертку, содержащую максимум один элемент, исходя из предположения, что значение атрибута id - уникально. Замените id=... на class=..., а селектор - на $(".btn_day1").

Здесь:

data: $("#"+form_day1).serialize(),

-- тоже.

Answer 2

Попытаюсь доступно:

Дело в том, что когда загружается ваша страница (первоначальная), только в этот момент и тогда происходит парсинг элементов для 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)

Answer 3

Попробуйте вот так, если не будет работать смотрите 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('Ошибка. Данные не отправлены.');
               }
           });
    }
Answer 4

Временно решил проблему путем создания уникальных 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> 
READ ALSO
Получить все счета из текста рег. выражением [закрыт]

Получить все счета из текста рег. выражением [закрыт]

Есть необходимость получения списка счетов из какого-то текста, счет - это набор цифр длиной от 20 до 30 символовЗаранее спасибо за помощь

152
Интеграция самописной CRM с ContactForm 7 (WordPress)

Интеграция самописной CRM с ContactForm 7 (WordPress)

Это комментарий к подключению самописной CRM

177
Помощь настройки отправки формы заказа

Помощь настройки отправки формы заказа

Столкнулся с такой проблемой, а именно:

206
Как отправить xml сообщение методом POST

Как отправить xml сообщение методом POST

Ниже приведен пример xml-сообщения которое должно быть отправлено методом POST на адрес https://anketaalfabank

192