В один прекрасный момент, красивый летний вечер был испорчен лишь одним сообщением. Клиент хотел чтобы форма авторизации и регистрации появлялись в сплывающем окне, а не на отдельной странице. Казалось бы задача пустяковая, но когда ты постоянно доделываешь того чего не было в ТЗ, мягко говоря раздражаешься. Вспоминаются слова "каков ТЗ и результат ХЗ". Прежде чем вступить в перепалку с клиентом (клиент всегда прав?) решил сначала подумать, как можно быстро все это дело реализовать.
И знаете? Ответ нашелся.
Схема работы:
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;});
}
//-------------------------------------------------
});

Комментариев нет:
Отправить комментарий