Модальное окно, форма, JQuery, перехватить SUBMIT
 

Добрый день.

С использованием JQuery и Bootstrap имеется страница, формируемая на основе шаблонов из нескольких частей:

head.tpl - общая для всех страниц часть - тут грузится JQUERY, BOOTSTRAP и $(document).ready(function() {});

menu.tpl - собственно менюшка со своими CSS

body.tpl - непосредственно содержимое страницы со своими CSS и нужными JS функциями.

В head - статический шаблон, menu и body - динамические, в зависимости от прав пользователя и конкретного действия.

В BODY есть кнопка создания новой записи в базу данных. По нажатию кнопки открывается модальное окно, содержимое которого динамически грузится из отдельного шаблона - MODAL.TPL.

Задача - сделать SUBMIT формы в модальном окне без перезагрузки страницы.

Перечитал кучу форумов, делал всё как написано. Не получается :-(

Если разместить форму и скрипт в шаблоне BODY.TPL - отрабатывает как надо, если же форма находится в модальном окне - не работает нижеприведённая функция.

Вот функция перехвата SUBMIT:

jQuery(function($){
		$("#edit_record_form").on("submit", function (event) {
			alert("1");
			event.preventDefault();
			var $this = $(this);
			var frmValues = $this.serialize();
			$.ajax({
				type: $this.attr('method'),
				url: $this.attr('action'),
				data: frmValues
			})
			.done(function () {
				$("#para").text("Done!" + frmValues);
			})
			.fail(function () {
				$("#para").text("An error occured!");
			});
		});
	});

Собственно вопрос - как надо взаимно расположить форму, функцию и модальное окно, чтобы это всё отработало?

строка 18

return false})

Еще раз.
проблема именно в том, что если разместить форму и функцию по обработке SUBMITа в основном теле страницы, то всё отрабатывает нормально, а если разместить всё это в шаблоне модального окна, который подгружается динамически, то нифига не работает.

gakhome,
попробуйте так

$("селектор блока в котором появится форма").on("submit", "#edit_record_form", function (event) {
если делегирование невозможно -- тогда то что грузит пусть после загрузки ставить обработку , нельзя повесить обработку на то чего нет.

РОНИ! Спасибо!

А именно за "тогда то, что грузит, пусть после загрузки ставит обработку".

Если вдруг еще найдутся такие как я...
Модальное окно динамически грузится через getXmlHttp.
Так вот чтобы желаемое заработало, действительно, пришлось обработчик прописать в getXmlHttp.onreadystatechange после окончания загрузки содержимого модального окна.

Хотя для меня лично пока остаётся загадкой почему обработчик не срабатывает когда он прописан в шаблоне модального окна...

скорее всего нет запуска подгруженного скрипта

Контент с работающими скриптами не подгружаются через вставку в html() или .append() / before()
Такой контент нун добавлять через appendTo() или insertBefore()
Типовая ошибка

Вроде onclick='func()' работает при подгрузке html ... а так если прописать правильный путь к элементу submit - забиндить click после его появления на странице ...

это атрибут а не скрипт

Это точно ... только вот задание перехватить нажатие элемента ...