Добрый день.
С использованием 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!");
});
});
});
Собственно вопрос - как надо взаимно расположить форму, функцию и модальное окно, чтобы это всё отработало?