В один прекрасный момент, красивый летний вечер был испорчен лишь одним сообщением. Клиент хотел чтобы форма авторизации и регистрации появлялись в сплывающем окне, а не на отдельной странице. Казалось бы задача пустяковая, но когда ты постоянно доделываешь того чего не было в ТЗ, мягко говоря раздражаешься. Вспоминаются слова "каков ТЗ и результат ХЗ". Прежде чем вступить в перепалку с клиентом (клиент всегда прав?) решил сначала подумать, как можно быстро все это дело реализовать.
И знаете? Ответ нашелся.
Схема работы:
1. Вешаем на кнопку ведущую на страницу авторизации обработчик вызывающий окно.
2. В это окно загружаем контент, полученный обращением через AJAX.
3. Если на странице есть формы, то они тоже должны работать через AJAX.
4. И главное, чтобы не надо было лезть в компоненты и что то дописывать. Все должно быть просто и удобно.
Результатом стал простенький скрипт, код ниже.
Подводные камни.
Основной проблемой была навешивание событий после добавления контента через функцию html(). Решением стало вот это:
И знаете? Ответ нашелся.
Схема работы:
1. Вешаем на кнопку ведущую на страницу авторизации обработчик вызывающий окно.
2. В это окно загружаем контент, полученный обращением через AJAX.
3. Если на странице есть формы, то они тоже должны работать через AJAX.
4. И главное, чтобы не надо было лезть в компоненты и что то дописывать. Все должно быть просто и удобно.
Результатом стал простенький скрипт, код ниже.
Подводные камни.
Основной проблемой была навешивание событий после добавления контента через функцию html(). Решением стало вот это:
$('#dform-content').html(result).promise().done(function(){ //тут вешаем обработчики. aliveFomrs(); });
Полный код:
//onpopup - ссылки у которых есть данный класс будут открывать страницу в окне. $('.onpopup').click(function () { //тут может быть colorbox, но в данном примере темный слой вызывается этой функцией. layerShow(); //показываем окно формы $('.d-form').show(); $('.d-form-content').fadeIn(500); //console.log($(this).attr('href')); //ОТкрываем ajax страницу $.ajax({url: $(this).attr('href')}).done(function(response) { // Парсим. Нам нужна только контентная часть страницы var result = $(response).find('.content'); //добавляем во нутрь окна. $('#dform-content').html(result).promise().done(function(){ // оживляем формы, чтобы работали через Ajax. // иначе при нажатии кнопок будет перекидывать на страницу. aliveFomrs(); }); }); return false; }); //---------------------------------------------------- //Функция оживления форм function aliveFomrs(){ $('#dform-content form').submit(function(){ $.ajax({ url: $(this).attr('action'), type: "POST", data:$(this).serialize()} ).done(function(response) { // Вызываем еще раз. ЧТобы после обработки формы остаться в окне. // И в случае непраивльных данных тоже. var result = $(response).find('.content'); $('#dform-content').html(result).promise().done(function(){ aliveFomrs(); }); });return false;}); } //------------------------------------------------- });
Комментариев нет:
Отправить комментарий