Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2015, 10:11
Новичок на форуме
Отправить личное сообщение для gakhome Посмотреть профиль Найти все сообщения от gakhome
 
Регистрация: 10.12.2015
Сообщений: 4

Модальное окно, форма, 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!");
			});
		});
	});


Собственно вопрос - как надо взаимно расположить форму, функцию и модальное окно, чтобы это всё отработало?
Ответить с цитированием
  #2 (permalink)  
Старый 10.12.2015, 10:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от gakhome
не работает нижеприведённая функция
строка 18
return false})
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2015, 16:58
Новичок на форуме
Отправить личное сообщение для gakhome Посмотреть профиль Найти все сообщения от gakhome
 
Регистрация: 10.12.2015
Сообщений: 4

Еще раз.
проблема именно в том, что если разместить форму и функцию по обработке SUBMITа в основном теле страницы, то всё отрабатывает нормально, а если разместить всё это в шаблоне модального окна, который подгружается динамически, то нифига не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 10.12.2015, 17:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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

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

Последний раз редактировалось рони, 10.12.2015 в 17:07.
Ответить с цитированием
  #5 (permalink)  
Старый 15.12.2015, 09:50
Новичок на форуме
Отправить личное сообщение для gakhome Посмотреть профиль Найти все сообщения от gakhome
 
Регистрация: 10.12.2015
Сообщений: 4

Сообщение от рони Посмотреть сообщение
gakhome,
попробуйте так

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

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

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

Хотя для меня лично пока остаётся загадкой почему обработчик не срабатывает когда он прописан в шаблоне модального окна...
Ответить с цитированием
  #6 (permalink)  
Старый 15.12.2015, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от gakhome
Хотя для меня лично пока остаётся загадкой почему обработчик не срабатывает когда он прописан в шаблоне модального окна...
скорее всего нет запуска подгруженного скрипта
Ответить с цитированием
  #7 (permalink)  
Старый 15.12.2015, 11:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Контент с работающими скриптами не подгружаются через вставку в html() или .append() / before()
Такой контент нун добавлять через appendTo() или insertBefore()
Типовая ошибка
Ответить с цитированием
  #8 (permalink)  
Старый 15.12.2015, 15:47
Интересующийся
Отправить личное сообщение для Sizz Lorr Посмотреть профиль Найти все сообщения от Sizz Lorr
 
Регистрация: 15.12.2015
Сообщений: 11

Вроде onclick='func()' работает при подгрузке html ... а так если прописать правильный путь к элементу submit - забиндить click после его появления на странице ...
Ответить с цитированием
  #9 (permalink)  
Старый 15.12.2015, 15:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Sizz Lorr
onclick
это атрибут а не скрипт
Ответить с цитированием
  #10 (permalink)  
Старый 15.12.2015, 16:29
Интересующийся
Отправить личное сообщение для Sizz Lorr Посмотреть профиль Найти все сообщения от Sizz Lorr
 
Регистрация: 15.12.2015
Сообщений: 11

Сообщение от рони Посмотреть сообщение
это атрибут а не скрипт
Это точно ... только вот задание перехватить нажатие элемента ...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно дописать модальное окно NewsForUs Events/DOM/Window 0 25.03.2013 13:27
Не отображается модальное окно FancyBox akc jQuery 0 29.05.2012 18:29
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 22:55
jquery .dialog Проблема:Всплывающее окно -отображается только 1 раз! denisOgr AJAX и COMET 1 26.07.2010 20:51
Как отключить submit формы в jQuery? khusamov Общие вопросы Javascript 2 08.07.2009 00:54