Обработка только что добавленных элементов DOM на сервере?

Question

[andreyqin]

Есть форма добавления нового блюда на сайте, в этой форме есть маленькая подформочка для добавления нового продукта. Добавление происходит с помощью AJAX: на сервер отправляется название продукта и его калорийность, а сервер возвращает информацию о добавленном продукте - его название и id в базе, далее этот ответ обрабатывается и вставляется в DOM.
Проблема в том, что при включении только что добавленного продукта в состав блюда, он не добавляется в состав, хотя сам элемент добавляется в дерево со всеми необходимыми значениями. При перезагрузке формы и добавлении этого продукта - все добавляется корректно. То есть, происходит так, что только что добавленного элемента в DOM как-будто не существует, сервер не обрабатывает его значения.
Клиентский код - learn.javascript.ru/play/zoPeuc
В чем может быть проблема?

Comments

[Сергей Кравченко]

Проблема в том, что при включении только что добавленного продукта в состав блюда, он не добавляется в состав, хотя сам элемент добавляется в дерево со всеми необходимыми значениями.

Это происходит отправкой обычной формой или используется AJAX? Если AJAX покажите код который это делает.

[andreyqin]

@GrandJaget, сама форма отправляется обычными средствами, без использования AJAX.

[Сергей Кравченко]

@andreyqin, у вас нет атрибутов name у input( как писал @Fesor )- поэтому и не работает отправка добавленных элементов.

$('<tr><td>' + newProductInfo['name'] + ':</td><td><input type="text" value="0" class="input-small" data-id="' + newProductInfo['id'] + '"> г.</td></tr>').appendTo($('.composition table'));

[andreyqin]

@GrandJaget, я написал, что добавил атрибуты name. Теперь код выглядит так - learn.javascript.ru/play/J0Q6fc

Answer 1

[Сергей Протько]

а где name у инпутов добавленных?

Comments

[andreyqin]

Подумал - "Вот она, ошибка!", но нет, name добавил, а только что добавленный продукт все так же не работает.

[Сергей Протько]

ну так а что отправляется на сервер? там есть ваши данные? Какое у вас имя филда, дайте взглянуть на форму саму...

[andreyqin]

Сама форма выглядит так: cdn.joxi.ru/uploads/prod/2014/02/17/e45/973/86fcef...
Формируется она динамически, данные берутся из базы и обрабатываются на клиенте такой функцией: learn.javascript.ru/play/N5CMdc

[Сергей Протько]

мне не интересно как выглядит форма. Меня интересуют какие имена имеют полям, как выглядит форма и как вы ее отправляете.

[andreyqin]

Собственно, код, который я привел последним и показывает как формируется форма. Имена полей формируются в виде массива composition и форма передается методом POST на сервер. Там код достаточно прозрачный:

if (isset($_POST['composition'])) {
    foreach ($_POST['composition'] as $id => $weight) {
        if ($weight > 0) {
            $comsposition[$id] = $weight;
	}
    }
}

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

[Сергей Кравченко]

покажите HTML формы до и после добавления нового элемента(без перезагрузки страницы).

Answer 2

[Сергей Кравченко]

При перезагрузке формы и добавлении этого продукта - все добавляется корректно.

Если вы имеете ввиду перезагрузку страницы, то попробуйте заменить
$('.add_product').on('click',
на
$(document).on("click", ".add_product",

Comments

[andreyqin]

А что это изменит?

[Сергей Кравченко]

Вот здесь подробно описано различие:
stackoverflow.com/questions/20032813/jquery-docume...

[andreyqin]

К сожалению, это не решение проблемы

[Сергей Протько]

@GrandJaget, делегирование событий нужно только при изменении dom дерева, а точнее если пропадают элементы на которые вешаются обработчики. При полной перезагрузке страницы ничего не поменяется.

[Сергей Кравченко]

@Fesor всё верно, но из описания проблемы я предположил, что AJAX и изменяет тот самый элемент, на который вешается обработчик.

[andreyqin]

Ошибка оказалась на сервере. При открывании блока добавления/редактирования блюда, на сервер аяксом посылается идентификатор блюда и выполняемое действие (add/edit). На сервере эти данные сохраняются в сессии. При добавлении нового продукта, форма которого находится в том же блоке, на сервер так же посылается аякс запрос. И вот почему-то из-за этого данные сессии о идентификаторе блюда и выполняемом действии то ли затираются, то еще что, не пойму. В общем, перед добавлением блюда в базу, проверка на выполняемое действие пропускается, и сразу переадресовывает на страницу блюд, соответственно и блюдо никуда не добавляется.
В коде это выглядит примерно так:

/* При открывании блока добавления/редактирования передали данные с клиента и запомнили их на сервере: */
$_SESSION['dishId'] = $_GET['dishId'];
$_SESSION['actionForDish'] = $_GET['actionForDish'];

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

/* Тут идет различная обработка входящих данных */
...

if ($_SESSION['actionForDish'] == 'add') {
    /* Тут добавляем новое блюдо */
} elseif ($_SESSION['actionForDish'] == 'edit') {
    /* Тут редактируем */
}
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit();

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