линия

Главная

понедельник, 19 июня 2017 г.

Bitrix - авторизация и регистрация во всплывающем окне

В один прекрасный момент, красивый летний вечер был испорчен лишь одним сообщением. Клиент хотел чтобы форма авторизации  и регистрации появлялись в сплывающем окне, а не на отдельной странице. Казалось бы задача пустяковая, но когда ты постоянно доделываешь того чего не было в ТЗ, мягко говоря раздражаешься. Вспоминаются слова   "каков ТЗ  и результат ХЗ".  Прежде чем вступить в перепалку с клиентом (клиент всегда прав?) решил сначала подумать, как можно быстро все это дело реализовать.
И знаете? Ответ нашелся.



Схема работы:
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;});
 }
 //-------------------------------------------------
});   


Комментариев нет:

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