InnerHTML + Ajax. Проблемы с сабмитом формы?

Question

[Дмитрий Петрик]

Ситуация такая: через ajax и innerHTML в нужное место страницы подгружается форма которая формируется в отдельном php файле.

function refresh(){ 
	 $.ajax({
				url: "ajax/db_table.php",
				success: function (data) {
				document.getElementById('boxcontent').innerHTML = data;
				}
			});
	 }
	window.onload = refresh();

Проблема заключается в том, что эту новоиспеченную форму мне нужно сабмитить через ajax.

$( document ).ready(function() {
var frm_upd = $('#upd_db');
    frm_upd.submit(function (ev) {
        $.ajax({
            type: frm_upd.attr('method'),
            url: frm_upd.attr('action'),
            data: frm_upd.serialize(),
            success: function (data) {
			if (data == "ok"){
				$.gritter.add({
					text: 'Информация успешно обновлена.'
				});
			  }else{
			    $.gritter.add({
					text: 'Ошибка! Информация не обновлена.'
				});
			}
            }
        });
        ev.preventDefault();
    });	
});

Форма #upd_db отправляет post запрос к файлу db.php, если все прошло нормально то db.php возвращает ответ "ok". В БД все обновляется нормально, проблема в том, что после сабмита формы меня в браузере перекидывает к файлу db.php и я просто вижу надпись "ok", а по идее меня со страницы с формой никуда кидать не должно, только уведомлялка должна всплыть все хорошо или нет.
Интересное наблюдение. Форма подгружается на страницу через ajax и innerHTML и она действительно видна на странице. Но когда смотрю код страницы в браузере то кода формы там не видно, т.е. просто пустой div #boxcontent. Возможно, поэтому Javascript и не может достучаться до этой формы. Пытался подгружать javascript для сабмита через ajax вместе с формой, но результат тот же самый: меня снова перекидывает к файлу db.php.
Может у кого-нибудь есть идеи в чем проблема и как её решить?

Answer 1

[sl_bug]

$(document).on('submit', '#upd_db', function(ev) { ... });

Answer 2

[Сергей Казаринов]

$(function(){

	$('#boxcontent').load('ajax/db_table.php',function(){
		var frm_upd = $('#upd_db');
		frm_upd.submit(function(){
			$.ajax({
				type: frm_upd.attr('method'),
				url: frm_upd.attr('action'),
				data: frm_upd.serialize(),
				success: function (data) {
					if (data == "ok"){
						$.gritter.add({
							text: 'Информация успешно обновлена.'
						});
					}else{
						$.gritter.add({
							text: 'Ошибка! Информация не обновлена.'
						});
					}
				}
			});
			return false;
		});	
	});
	
});

Вам лучше первый ajax укоротить до функции load. Отправка подгруженной формы осуществляется внутри load, так как отсутствует в изначальном DOM. Чтобы после отправки мы не переходили на другую страницу, в коце функции submit отправляем submit false;

Либо использовать, как у вас ajax, js код отвечающий за отправку формы - поместить внутрь success:

$(function(){
	
	$.ajax({
		url: "ajax/db_table.php",
		success: function (data) {
			$('#boxcontent').html(data);
		
			var frm_upd = $('#upd_db');
			frm_upd.submit(function(){
				$.ajax({
					type: frm_upd.attr('method'),
					url: frm_upd.attr('action'),
					data: frm_upd.serialize(),
					success: function (data) {
						if (data == "ok"){
							$.gritter.add({
								text: 'Информация успешно обновлена.'
							});
						}else{
							$.gritter.add({
								text: 'Ошибка! Информация не обновлена.'
							});
						}
					}
				});
				return false;
			});
		}
	});
});

Answer 3

[Кирилл Платонов]

Проблема в том, что вы добавляете форму динамически. Соответственно в DOM появляется новый элемент, к которому не привязаны какие либо события.
Решением проблемы будет привязка события submit непосредственно после динамического добавления формы на страницу.
Делается это очень просто. Я немного упростил ваш код, заменив js-решения более удобными jquery-альтернативами.

function refresh(){
	$.get("ajax/db_table.php",function(data){
		// Динамически вставляем форму в страницу
		$('#boxcontent').html(data);
		// Привязываем событие
		$('#upd_db').bind('submit',function(event) {
			// Отправляем POST-запросом данные формы
			$.post($('#upd_db').attr("action"),$('#upd_db').serialize(),function(data){
				if (data == "ok") {
					$.gritter.add({
						text: 'Информация успешно обновлена.'
					});
				} else {
					$.gritter.add({
						text: 'Ошибка! Информация не обновлена.'
					});
				}
			});

			event.preventDefault();
		});
	});
}
window.onload = refresh();

Код не тестировал, если будут с ним проблемы - пишите.

На будущее рекомендации вам:
вместо innerHTML - методы text() и html()
для post/get ajax запросов бывает удобнее использовать упрощенные методы get() и post()
и почитайте о привязке событий с помощью bind()

Comments

[Дмитрий Петрик]

У вас красивое решение. Но как быть если форма будет не одна, а несколько идентичных? У меня их несколько вываливается по ajax запросу. IDшники примерно такие #upd_db_1 #upd_db_2 #upd_db_3 и т.д. Кроме как множить на php код с биндом события у меня других идей нет

[Кирилл Платонов]

Можно привязать к нескольким ID. http://pastebin.com/tAtLC5bv

[Кирилл Платонов]

@Flexo решили проблему?

[Дмитрий Петрик]

@BloodyHistory если честно, то пока еще нет. У меня несколько форм на странице и пользователь может добавлять еще формы. Я думал каждый раз при добавлении формы сбрасывать все старые и получать их заново от php который их выгребает из БД. Вот собственно с этим то и бился. Но потом подумав решил что все-таки проще сразу добавлять одну новую форму через Javascript и прикручивать к ней обработчик. У вас есть skype или ICQ?

[Кирилл Платонов]

@Flexo skype platonov-kd

Answer 4

[Par Mactep]

return false;
должна возвращать функция-обработчик отправки формы.

Answer 5

[sasha]

я бы сделал проще с средствами XMLHttpRequest2, динамически создать форму и на аяксе спокойно ее отправлять, но как вариант просто накинь на кнопку отправки форму вот это ... onclick="return false" и все дела.