[AjaxForm] Версия 1.0.2-pl

В репозитории Simple Dream доступна новая версия компонента AjaxForm.

Список изменений:

Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
$(document).on('af_complete', function(event, response) {
	console.log(event, response);
});


[#4] Если в системе установлен pdoTools, то чанк с формой будет обрабатывать именно он, а значит вы можете использовать @INLINE чанки. Напоминаю, что в них не работают сниппеты и фильтры!

[#3] Теперь можно выставлять плейсхолдеры в форме, указав их в параметре сниппета. То есть:
[[!AjaxForm?fi.name=`Петр Петрович`]]
заполнит имя в дефолтном чанке.

[#2] Убрал класс error у полей для вывода ошибок в стандартной форме. Он теперь добавляется автоматически, если форма не прошла валидацию.

Обновляемся, тестируем, пишем замечания и предложения.
Василий Наумкин
18 июня 2014, 02:07
modx.pro
4
8 766
+4

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

Евгений
18 июня 2014, 08:19
0
Василий, посоветуйте, а как православно ловить ошибки? Я использую вот такие конструкции:
<div class="form-group">
        <div class="col-sm-10 col-sm-offset-1 [[!+fi.error.name:notempty=`has-error`]]">
            <input type="text" class="form-control" name="name" id="name" value="[[!+fi.name]]" placeholder="Ваше имя">
            <div class="error error_name">[[!+fi.error.name]]</div>
        </div>
    </div>
То есть мне нужно если существует ошибка добавить класс has-error к div'у. Почему-то этого сейчас не происходит. Как это правильнее сделать?
    Василий Наумкин
    18 июня 2014, 12:25
    +1
    Эти конструкции не помогут, потому что форма отправляется через ajax и страница не перезагружается. Так что, парсер MODX тут ничего не сделает.

    Нужно или поменять javascript, или установить новую версию и удалить в своём чанке везде класс «error» — он будет добавляться автоматически теперь.

    Ну и вместо has-error заменить оформление на error, понятное дело.
    Василий Столейков
    19 июня 2014, 09:50
    0
    Ух ты! Похоже эта моя проблема уже решена с коробки: modx.pro/help/3243/!
    Будем эксперементировать…
    Василий Столейков
    19 июня 2014, 11:08
    1
    0
    А как получить информацию из php-скрипта в эту функцию, например чтобы проверить по условию результат выполнения и соответственно вывести нужный js-код?

    if ($_POST['action'] == "add") {
        	return $AjaxForm->success('Добавлено');
        	echo "Work";
        }
        if ($_POST['action'] == "remove") {
        	return $AjaxForm->success('Не добавлено');
        
        }
    В функции af_complete, res.result и res.data показывают undefined. Или я что-то недопонимаю?
      Wassi Wassinen
      20 июня 2014, 07:49
      0
      Пытаюсь понять, если я вывожу форму в модальном окне, что мне ловить в jQuery, чтобы закрыть его или заменить форму на сообщение об успехе?
      Заранее благодарен.
        Алексей Карташов
        20 июня 2014, 09:40
        1
        +2
        Мужик, об этом весь топик и написан. Даже с кодом, который тебе нужен:

        $(document).on('af_complete', function(res) {
        	if (res.success) {
                     // показываем сообщение об успехе, по таймауту закрываем модалку
                } else {
                     // закрывать ничего не надо, ибо ошибка и юзер должен её исправлять
                }
        });

        А по теме — Вась, спасибо! Как всегда всё годно и в лучшем виде)
        Отпуска тебе охрененного!
          Василий Наумкин
          20 июня 2014, 09:57
          0
          Спасибо, друг!
            Wassi Wassinen
            20 июня 2014, 21:43
            0
            Спасибо! Я в этих делах не силен. Этот ответ будет разным для нескольких форм
            на странице?
          reticon
          28 июня 2014, 17:05
          0
          Спасибо за отличный компонент.
          Единственное, не могу понять — почему, когда приходит письмо, в заголовке «От» вместо имени отправителя стоит просто [[+fi.name]]?
          Вызов сниппета, в данном случае, такой:
          [[!AjaxForm?
          	&snippet=`FormIt`
          	&form=`chn_ContactFormTpl`
          	&hooks=`spam,email,emailUser,redirect`
              	&emailSubject=`Сообщение с сайта`
              	&emailTo=`xxx@xxx.xx`
          	&emailFromName=`[[+name]]`
          ]]
          Причем, сначала было нормально (отображалось имя пользователя), потом, одно время, туда прописывалось, почему-то, имя чанка (chn_ContactFormTpl), а сейчас отображается просто [[+fi.name]].
            reticon
            29 июня 2014, 00:26
            0
            Странно… Убрал
            &emailFromName=`[[+name]]`
            — стало нормально, в заголовках письма в поле «От» теперь эл. адрес отправителя.
              Василий Наумкин
              29 июня 2014, 00:43
              0
              При обработке параметра выходило
              &emailFromName=``
              То есть — пустота, потому что плейсхолдера name на странице, при вызове сниппета не было.

              А сейчас ты убрал пустой параметр, и там стало значение по умолчанию. Сам сломал — сам починил.
                reticon
                29 июня 2014, 00:46
                0
                Понял, спасибо!
            Антон Фомичёв
            14 июля 2014, 13:16
            +2
            В конструкции
            $(document).on('af_complete', function(res) {
            	console.log(res);
            });
            res предсказуемо содержит объект jquery.event, таргетом которого является $(document).
            В соответствии с API jQuery дополнительные параметры передаются обработчику начиная со второго аргумента функции.

            То есть так:
            $(document).on('af_complete', function(event,res) {
            	console.log(res);
            });
              Dmitry Rodionov
              16 июля 2014, 00:12
              0
              Это верно подмечено.
              Установил новую версию, но если на странице 3 формы, то не понятно к какой относится это сообщение, нет указания на форму.
              Так же класс error автоматически не указывается для полей формы, может быть потому что их несколько.
                Dmitry Rodionov
                16 июля 2014, 00:35
                0
                Посмотрел код, неправильно понял фразу или она неправильно написана, вообщем хотелось бы так же увидеть обработку ошибок у полей.
                form.find('[name="' + key + '"]').addClass('error');
                  Антон Фомичёв
                  16 июля 2014, 10:19
                  1
                  0
                  Я бы предложил что-то такое:

                  $(document).on('af_complete', function(event,res) {
                  	if(!res.success){
                  		form.find('[name="' + res.key + '"]').addClass('error');
                  	}
                  });
                  При этом, не забудь определить переменную form (она должна содержать объект jQuery).
                  Ну и твой сниппет должен отдавать json с полями success и key по меньшей мере.
                    Dmitry Rodionov
                    17 июля 2014, 09:37
                    0
                    Так откуда взять форму есть функция приема события одна, а форм на странице к примеру 5?
                      Антон Фомичёв
                      17 июля 2014, 13:23
                      1
                      0
                      Вижу два варианта.

                      Первый:
                      1. У каждой из форм есть атрибут id, а так же тэг
                      <input type="hidden" name="formid" value="[[+значение атрибута id]]">
                      2. Сниппет должен вместе с основным ответом возвращать значение $_POST['formid'] виде {«formid»:«значение»}.
                      3. Тогда обработчик события выглядит следующим образом:
                      $(document).on('af_complete', function(event,res) {
                      	var form = $("#"+res.formid);
                      	if(!res.success){
                      		form.find('[name="' + res.key + '"]').addClass('error');
                      	}
                      });
                      Второй:
                      1. Через гитхаб или как-то по-другому предложить Василию изменить часть кода default.js таким образом:
                      $(document).trigger("af_complete", response, form);
                      2. Если коммит будет принят, то тогда твой скрипт будет выглядеть так:
                      $(document).on('af_complete', function(event,res,form) {
                      	var $form = $(form);
                      	if(!res.success){
                      		$form.find('[name="' + res.key + '"]').addClass('error');
                      	}
                      });
                        Wassi Wassinen
                        09 февраля 2015, 15:06
                        0
                        Нужно определять форму, которая возвращает af_complete, до работы с условиями, а не после. Это более универсально.
              Андрей
              06 октября 2014, 22:32
              0
              Здравствуйте. При отправке сообщений в IE выводится стандартное сообщение — Форма успешно отправлена, хотя в вызове формы прописано другое сообщение. Как устранить проблему?
                Artsiom_Burkun
                28 октября 2014, 09:04
                0
                Использую плагин xfpc. Соответственно возникли проблемы с ключами. Ошибка: «Не могу найти указанный ключ формы (action). ». Для незарегистрированных пользователей, конечно.

                Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?
                  Володя
                  28 октября 2014, 09:31
                  0
                  в сессии github.com/bezumkin/AjaxForm/blob/master/core/components/ajaxform/model/ajaxform/ajaxform.class.php#L111
                  скорее всего у вас с ними что то не так…

                  А скорее всего дело в плагине…
                    Artsiom_Burkun
                    28 октября 2014, 11:11
                    0
                    Вопрос в том, что из кэша xfpc не передается $_SESSION['AjaxForm'] файлу assets/components/ajaxform/action.php.
                      Володя
                      28 октября 2014, 11:13
                      0
                      думаю выход кардинальный — не использовать xfpc, либо AjaxForm
                        Алексей
                        19 ноября 2014, 12:41
                        0
                        Володя добрый день!
                        Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!

                        Спасибо!
                      TITAN-UZ
                      21 декабря 2014, 02:28
                      0
                      Включите в вызов

                      &frontend_js=`assets/components/ajaxform/js/custom.js`
                        TITAN-UZ
                        21 декабря 2014, 04:39
                        0
                        Странно custom.js 404- not found :D но форма работает если убрать fronted_js то ошибка
                        Не могу найти указанный ключ формы (action)
                    Андрей
                    10 декабря 2014, 18:30
                    0
                    Добрый вечер! У меня возникла такая проблема, письмо отправляется но приходит вот в таком виде
                    Имя
                    [[+fi.name]]
                    E-mail
                    [[+fi.email]]
                    Сообщение
                    [[+fi.message]]
                    Очистить Отправить

                    т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?
                      Wassi Wassinen
                      12 декабря 2014, 03:26
                      0
                      Как не дать отработать submit до заполнения всех полей?

                      Сейчас, даже если валидация полей не пройдена, скрипт на onsubmit срабатывает.

                      Заранее благодарен.
                        Василий Наумкин
                        12 декабря 2014, 06:55
                        0
                        1. Изменить стандартный javascript и добавить валидацию.

                        2. Забить и продолжать пользоваться валидацией FormIt, ибо любую проверку на фронте можно всегда обойти. А на стороне сервера — никак.
                          Wassi Wassinen
                          12 декабря 2014, 12:42
                          0
                          Я бы забил, но это плодит массу достигнутых целей при аналитике. Следовательно, е позволяет точно оценивать конверсию.

                          Если есть возможность, поясни как победить проблему. Спасибо скину сразу.

                          Заранее благодарен.
                            Василий Наумкин
                            12 декабря 2014, 13:27
                            0
                            Нет никакой проблемы — прикручивайте javascript валидатор к форме, чтобы он не давал её отправить. Даже, скорее всего, и стандартный javascript менять не придётся.

                            Ни AjaxForm, ни FormIt тут ничем не мешает и не помогает, это вообще другое.
                              Wassi Wassinen
                              13 декабря 2014, 01:02
                              0
                              Василий, я пробовал вешать return на submit вот этой функции:

                              <script type="text/javascript">
                              function validate(){
                                 //Считаем значения из полей name и email в переменные x и y
                                 var x=document.forms["call-form"]["name"].value;
                                 var y=document.forms["call-form"]["phone"].value;
                                 //Если поле name пустое выведем сообщение и предотвратим отправку формы
                                 if (x.length==0){
                                    return false;
                                 }
                                 //Если поле email пустое выведем сообщение и предотвратим отправку формы
                                 if (y.length==0){
                                    return false;
                                 }
                              }
                              </script>
                              Никакого эффекта — форма уходит.
                                Василий Наумкин
                                13 декабря 2014, 06:28
                                0
                                Это — функция, да. А как ты её вешаешь на форму?
                                  Василий Наумкин
                                  13 декабря 2014, 06:59
                                  0
                                  В общем, как бы ты не вешал событие на отправку формы — это будет просто 2 независимых обработки этого события. То есть, сначала сработает твоё, а потом, независимо от него, сработает отправка.

                                  Поэтому, нужно научить скрипт AjaxForm смотреть в результаты работы твоей проверки.

                                  Вешаем свой валидатор на форму с классом .ajax_form:
                                  <script>
                                  $(document).on('submit', '.ajax_form', function() {
                                  	// Здесь любой код для проверки формы при отправке
                                  	// Я просто печатаю её в консоли бразуреа
                                  	console.log(this);
                                  	// Результатом работы будет выставление глобальной переменной
                                  	afValidated = false; // Или true, если валидация пройдена
                                  });
                                  </script>
                                  
                                  [[!AjaxForm?
                                  	&frontend_js=`assets/components/ajaxform/js/custom.js`
                                  ]]

                                  А дальше копируем родной javascript в custom.js и добавляем проверку afValidated перед отправкой вот здесь:
                                  ,beforeSubmit: function(fields, form) {
                                  	if (typeof(afValidated) != 'undefined' && afValidated == false) {
                                  		return false;
                                  	}
                                  	form.find('.error').html('');
                                  	form.find('input,textarea,select,button').attr('disabled', true);
                                  	return true;
                                  }
                                  Если переменная afValidated существует и равна false — форма не отправится.
                                    Василий Наумкин
                                    13 декабря 2014, 07:20
                                    0
                                    Добавил проверку afValidated в версию 1.0.4 — можно обновляться.

                                    Переименовывать javascript и вносить в него правки больше не нужно. Просто запускай свой валидатор и выставляй переменную в true или false.
                                      Василий Наумкин
                                      13 декабря 2014, 08:36
                                      0
                                      И заодно написал страницу в документации, раз пошло такое дело.
                                        Wassi Wassinen
                                        13 декабря 2014, 12:16
                                        0
                                        Василий, большое тебе, человеческое спасибо! Никак не могу найти на безумкин.ру где спасибо отправить.
                                        Wassi Wassinen
                                        13 декабря 2014, 12:25
                                        0
                                        Отправил. Спасибо еще раз!
                                        Wassi Wassinen
                                        02 февраля 2015, 18:37
                                        0
                                        Василий, вешаю твой скрипт на форму (форма в модальном окне):

                                        <script type="text/javascript">
                                        $(document).on('af_complete', function(res) {
                                        		parent.$(".close").click();
                                        });
                                        </script>
                                        По-идее, должен закрывать окно после отправки формы. Но закрывает при нажатии кнопки «Отправить», даже если поля не заполнены.

                                        Вешаю вот такую валидацию полей:

                                        <script type="text/javascript">
                                        $(document).on('submit', '.ajax_form', function() {
                                            var fields = ["contact_name1", "contact_phone1"];
                                        
                                            $(".modal-content").submit(function(){
                                                var error = 0; // флаг заполнения обязательных полей
                                        
                                                $(".call-form-modal").find(":input").each(function(){ // проходимся в цикле по всем полям формы
                                        			for(var i = 0; i < fields.length; i++){ // проходимся по массиву обязательных полей
                                        				if($(this).attr("name") == fields[i]){ // если проверяемое поле есть в списке обязательных
                                        					if( !$.trim($(this).val()) ){ // если поле не заполнено
                                        						$(this).addClass("formNotContent1");
                                        						afValidated = false; // Или true, если валидация пройдена
                                        					}else{
                                        						// если заполнено - убираем обводку
                                        					  afValidated = true; // Или true, если валидация пройдена
                                        						$(this).removeClass("formNotContent1");
                                        					}
                                        				}
                                        			}
                                        		});
                                        	});
                                        
                                            // Результатом работы будет выставление глобальной переменной
                                          
                                        });
                                        </script>
                                        Вроде бы всё отрабатывает нормально, но при первой отправке пустой формы срабатывает action.php и как следствие код на событие «af_complete».

                                        В чем может быть дело?

                                        Заранее благодарен.
                                          Wassi Wassinen
                                          02 февраля 2015, 18:55
                                          0
                                          Забыл добавить — после первого нажатия кнопки «Отправить», помимо вышеописанного, почему-то срабатывает валидация формита, а не яваскрипт.
                                            Wassi Wassinen
                                            02 февраля 2015, 19:36
                                            0
                                            Василий, спасибо, разобрался. Косяк в моем коде.
                                              Wassi Wassinen
                                              09 февраля 2015, 13:11
                                              0
                                              Василий, а как поймать afComplete от определенной формы? У меня на странице их несколько и как только заполняют одну из них, событие срабатывает на всех.
                                                Василий Наумкин
                                                09 февраля 2015, 15:19
                                                0
                                                $(document).on('af_complete', function(event, response) {
                                                	console.log(response.form);
                                                });
                                                  Wassi Wassinen
                                                  09 февраля 2015, 16:07
                                                  0
                                                  Василий, отправлю пятьсотспасибо. Разъясни, а то я не понял.

                                                  У меня есть несколько форм на одной странице. У каждой свой id="". На событие af_complete от формы с id=«test-form» мне нужно повесить
                                                  parent.$(".close").click();
                                                  Как это реализовать?

                                                  Заранее благодарен.
                                                    Василий Наумкин
                                                    09 февраля 2015, 16:20
                                                    0
                                                    Разъясняю: в событие передаются данные от сервера + форма, с которой они были отправлены.

                                                    Форма находится в response.form:
                                                    $(document).on('af_complete', function(event, response) {
                                                    	var form = response.form;
                                                    	if (form.attr('id') == 'твой_id') {
                                                    		//Делаем что хотим с формой
                                                    		form.hide();
                                                    	}
                                                    });
                                                    Wassi Wassinen
                                                    09 февраля 2015, 16:42
                                                    0
                                                    Василий, спасибо и еще раз спасибо! Отправил! Если есть возможность, добавь в документацию. Очень нужная штука.
                                                    Это сообщение было удалено
                                                    Это сообщение было удалено
                                TITAN-UZ
                                13 декабря 2014, 12:49
                                +1
                                Респект! Спасибо за обновления!
                                  Алексей Смирнов
                                  20 декабря 2014, 21:46
                                  0
                                  Всем привет.
                                  Не работает AjaxForm при использовании прикрепления файла в IE 8 и 9 как минимум. (опера, хром в норме)
                                  Если указать в поле enctype=«multipart/form-data»:
                                  <form enctype="multipart/form-data" method="post" action="[[~[[*id]]]]"  name="mega-form-one1" id="mega-form-one1">
                                  ....
                                  <input type="file" name="file" value="[[!+fi.file]]" />
                                  ......
                                  Если убрать эту надпись то все отправляется но естественно приходит только путь файла на компе.
                                  Пишет ошибку в ие:
                                  SCRIPT5007: Не удалось задать значение свойства "form": значением объекта является NULL или он не определен 
                                  default.js, строка 41 символ 6
                                  Куда копать подскажите пожалуйста.?
                                    Пётр Молчанов
                                    28 января 2015, 14:51
                                    0
                                    В чанке у одного инпута стоит disabled, но на деле он появляется без этого атрибута. Так и должно быть?
                                      Константин Ильин
                                      30 января 2015, 02:41
                                      0
                                      Подскажите пожалуйста как сделать

                                      После отправки полям добавляется класс error.
                                      К примеру у меня он с красным бекграундом, т.е как бы те поля которые не прошли валидацию будут красными.
                                      Все как бы ок.

                                      Но если ввести все правильно повторно и поле проходит валидацию error не удаляется. И соответственно поле остается с красным бекграундом.

                                      В default.js надо что то дописать?
                                        Сергей Бевзенко
                                        02 июня 2015, 22:36
                                        0
                                        Добрый вечер!
                                        При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
                                        На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.
                                          Слава
                                          11 июня 2015, 09:46
                                          0
                                          Всем привет. Подскажите как реализовать на MiniShop 2: Необходимо сделать минимальную сумму заказа, т.е. Оформление заказа должно совершаться если сумма заказов выше заданной (Например: 5000 р.)

                                            Stan Ezersky
                                            21 сентября 2015, 02:08
                                            1
                                            0
                                            Привет!
                                            А есть возможность использовать две формы на странице и как? У одной формы есть input hidden с хэшем, у второй формы пустой input hidden, соответственно по дефолту получаю «Не указан ключ формы (action).»
                                            Как решить?
                                              Василий Наумкин
                                              21 сентября 2015, 04:09
                                              0
                                              Когда я в последний раз проверял — всё работало.

                                              Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.
                                                Stan Ezersky
                                                21 сентября 2015, 13:17
                                                0
                                                Я так и не понял, что было, тупо переписал запросы с нуля.

                                                Возник такой вопрос, почему не работает добавление класса, если есть ошибка:

                                                <div class="form-group[[+fi.error.name:notempty=` has-error`]]">
                                                          <label for="af_name" class="visible-xs">Имя</label>
                                                          <input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Имя" class="form-control">
                                                          <span class="help-block error_name">[[+fi.error.name]]</span>
                                                        </div>
                                                Я ничего не упустил в [[+fi.error.name:notempty=` has-error`]]?
                                                  Василий Наумкин
                                                  21 сентября 2015, 13:23
                                                  0
                                                  А как оно может работать, если отправка формы происходит через ajax? Страница не перезагружается, плейсхолдеры не обрабатываются.

                                                  Показывать/скрывать ошибки при таком подходе можно только через javascript — и в стандартных чанках это предусмотрено. А плейсхолдеры с ошибками там прописаны на случай работы без ajax (или вообще по привычке, не помню уже).
                                              nekto
                                              22 марта 2016, 14:29
                                              0
                                              Здравствуйте!
                                              Пытаюсь отдать данные при отправки форма, использую ajaxForm и formIt.
                                              В сниппете возращаю
                                              return $AjaxForm->success('Спасибо', $new->toArray());
                                              но от сервера приходит пустой массив
                                              data: []
                                              message: "Спасибо за отзыв!"
                                              success: true
                                              Если отправлять данные в лог, то все ок
                                              $modx->log(xPDO::LOG_LEVEL_ERROR, $AjaxForm->success('Спасибо', $new->toArray()));
                                              В чем может быть проблема, никто не сталкивался?
                                                B1M0
                                                07 октября 2019, 18:54
                                                0
                                                Добрый день! Подскажите такой вопрос — на сайте есть группа товаров, которые вызываются getresourses на главную страницу и на каждом есть кнопка — быстрый заказ. Хотелось бы реализовать pop-up форму, которая бы подгружала хотя бы заголовок товара, а лучше всего TV. Это реально?
                                                  Aborrol
                                                  07 октября 2019, 20:31
                                                  1
                                                  0
                                                  я это реализую передачей нужных данных из data атрибута кнопки в cкрытое поле при открытии формы с помощью js
                                                    B1M0
                                                    07 октября 2019, 20:34
                                                    0
                                                    Благодарю!
                                                    Андрей
                                                    07 октября 2019, 20:32
                                                    0
                                                    Реально, в чём проблема?
                                                    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                                    67