Повторно не отправляются данные, что делать?

Question

[smoln]

Добрый день, когда пытаюсь отправить повторно уже из обновленного блока данные формы через ajax, ничего не происходит, то есть, блок обновляется, но данные не отправляются.

<script type="text/javascript">
function AjaxFormRequest(result_id,form_id,url) {
               jQuery.ajax({
                    url:     url, //Адрес подгружаемой страницы
                    type:     "POST", //Тип запроса
                    dataType: "html", //Тип данных
			        data: jQuery("#"+form_id).serialize(),
	               success: function(response) { //Если все нормально
	               document.getElementById(result_id).innerHTML = response;
                },
	             error: function(response) { //Если ошибка
                document.getElementById(result_id).innerHTML = "Ошибка сохранения";
                }
             });
		
	
        }
</script>

Онклик на button

<input value='' type=button class=postbutton onclick=\"AjaxFormRequest('list_result', 'form$id_form', 'edit.php')\" id=btn>

Вся информация обновляется в блок с id=list_result, там же находятся все формы с разными id, после физической перезагрузки первая отправка формы работает, пытаюсь отправить дальше, результата нет, блок обновляется, но данные не отправляются.
Пробовал вот так, результат такой же

<script type="text/javascript">
$(document).ready(function(){

   $('#list_result').on('submit', '#add', function(e){
        //отменяем стандартное действие при отправке формы
        e.preventDefault();
        //берем из формы метод передачи данных
        var m_method=$(this).attr('method');
        //получаем адрес скрипта на сервере, куда нужно отправить форму
        var m_action=$(this).attr('action');
        //то есть в стандартном формате передачи данных формы
        var m_data=$(this).serialize();
            $.ajax({
            type: m_method,
            url: m_action,
            data: m_data,
                success: function(result){
                    $('#list_result').html(result);
                }
            });
        });
});
		
</script>

Answer 1

[Алексей Картушин]

Вы инлайново прописываете метод который вам нужно выполнить, а нужно инициализировать прямо на элемент.
Я бы посоветовал этот онклик делегировать с формы или внутри чего он у вас находиться, примерно так это должно выглядить:

$('#list_result').on('click', '#btn', function(){
  AjaxFormRequest('list_result', 'form$id_form', 'edit.php')
});

Comments

[smoln]

Спасибо, за ответ.
Я писал в конце что ничего не происходит, результат если использовать on, такой же, с вашим примером тоже самое, результат тот же, первый раз все хорошо, второй раз данные не передаются, хотя блок обновляется.

[Алексей Картушин]

smoln: Можете показать пример html и пример ответа который должен будет вставлен? Ещё уточните пожалуйста версию jquery (Можно сделать командой $.fn в консоли браузера).

[smoln]

$('#list_result').on('click', '.postbutton', function(){
var formID = $(this).attr('id'); // Получение ID формы
alert(formID)
  AjaxFormRequest('list_result',formID, 'edit_otzyv.php');
});

передаю форму, каждая formID разная, результат тот же, первый раз все хорошо, второй раз ничего, блок обновляется и все

Версия jquery 2.1

пример html

<table  id=list_result>
<form id=form1 method=post><input type=hidden  name=id value=1><tr><td>Информация id1</td></tr></form>
<form id=form2 method=post><input type=hidden  name=id value=2><tr><td>Информация id1</td></tr></form>
<form id=form3 method=post><input type=hidden  name=id value=3><tr><td>Информация id1</td></tr></form>
<form id=form4 method=post><input type=hidden  name=id value=4><tr><td>Информация id1</td></tr></form>
  и тд...
</table>

Соответственно в edit.php все обрабатывается и выводиться такой же список в list_result

<form id=form1><input type=hidden  name=id value=1><tr><td>Информация id1</td></tr></form>
<form id=form2><input type=hidden  name=id value=2><tr><td>Информация id1</td></tr></form>
<form id=form3><input type=hidden  name=id value=3><tr><td>Информация id1</td></tr></form>
<form id=form4><input type=hidden  name=id value=4><tr><td>Информация id1</td></tr></form>

Первый раз все работает, второй нет, то есть не работает почему то отправка данных

[Алексей Картушин]

https://codepen.io/Aloving/pen/rmZgYa - с таким примером у меня работает.
Записал небольшое превью:


Полный размер: https://hsto.org/web/a48/878/565/a4887856588c4fe28...
Обратите внимание что с бека я получаю простой html.
(На примере я отображаю его в консоли).
Это моделирует вашу ситуацию.
Кстати обращу внимание что в вашем примере данных с бека у вас нет поля method='post'.
p.s - я пробовал так-же с полем post поиграться - всё работает.
p.p.s - я так-же пробовал вытаскивать поля через $(this).attr - всё так-же прекрасно работает.

[smoln]

Алексей Картушин: спасибо за такой обширный ответ, буду пробовать, пока не могу понять почему не передаются данные, так как сама функция работает, id формы разное...

[Алексей Картушин]

smoln: Попробуйте данные которые вы цепляете и в будущем вставляете в ajax вывести в консоли и посмотреть, может там чего-то не хватает.
В случае с .serialize() убедитесь что сериализуются ли данные как вам нужно.

[smoln]

да, почему то после первого обновления вывожу alert(jQuery("#"+form_id).serialize())
пусто... хотя alert(form_id) показывает

[Алексей Картушин]

smoln: Да, обратите внимание на структуре DOM после добавления разметки (как у вас), input'ы лежат рядом с формами, когда я изменил её на что-то такое(см. Ниже), айтемы стали сериализоваться правильно, потому-что input входит в форму,а не лежит рядом с ней.

<div  id=list_result>
	<form id=form1 method=post><input type=hidden  name=id value=1>Информация id1</form>
	<form id=form2 method=post><input type=hidden  name=id value=2>Информация id1</form>
	<form id=form3 method=post><input type=hidden  name=id value=3>Информация id1</form>
	<form id=form4 method=post><input type=hidden  name=id value=4>Информация id1</form>
</div>