[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

10 108

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

Евгений

18 июня 2014, 08:19

Василий, посоветуйте, а как православно ловить ошибки? Я использую вот такие конструкции:

<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

Эти конструкции не помогут, потому что форма отправляется через ajax и страница не перезагружается. Так что, парсер MODX тут ничего не сделает.

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

Ну и вместо has-error заменить оформление на error, понятное дело.

Василий Столейков

19 июня 2014, 09:50

Ух ты! Похоже эта моя проблема уже решена с коробки: modx.pro/help/3243/!
Будем эксперементировать…

Василий Наумкин

19 июня 2014, 10:07

Специально для тебя и добавил =)

Василий Столейков

19 июня 2014, 11:08

А как получить информацию из 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

Пытаюсь понять, если я вывожу форму в модальном окне, что мне ловить в jQuery, чтобы закрыть его или заменить форму на сообщение об успехе?
Заранее благодарен.

Алексей Карташов

20 июня 2014, 09:40

Мужик, об этом весь топик и написан. Даже с кодом, который тебе нужен:

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

А по теме — Вась, спасибо! Как всегда всё годно и в лучшем виде)
Отпуска тебе охрененного!

Василий Наумкин

20 июня 2014, 09:57

Спасибо, друг!

Wassi Wassinen

20 июня 2014, 21:43

Спасибо! Я в этих делах не силен. Этот ответ будет разным для нескольких форм
на странице?

reticon

28 июня 2014, 17:05

Спасибо за отличный компонент.
Единственное, не могу понять — почему, когда приходит письмо, в заголовке «От» вместо имени отправителя стоит просто [[+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

Странно… Убрал

&emailFromName=`[[+name]]`

— стало нормально, в заголовках письма в поле «От» теперь эл. адрес отправителя.

Василий Наумкин

29 июня 2014, 00:43

При обработке параметра выходило

&emailFromName=``

То есть — пустота, потому что плейсхолдера name на странице, при вызове сниппета не было.

А сейчас ты убрал пустой параметр, и там стало значение по умолчанию. Сам сломал — сам починил.

reticon

29 июня 2014, 00:46

Понял, спасибо!

Антон Фомичёв

14 июля 2014, 13:16

В конструкции

$(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

Это верно подмечено.
Установил новую версию, но если на странице 3 формы, то не понятно к какой относится это сообщение, нет указания на форму.
Так же класс error автоматически не указывается для полей формы, может быть потому что их несколько.

Dmitry Rodionov

16 июля 2014, 00:35

Посмотрел код, неправильно понял фразу или она неправильно написана, вообщем хотелось бы так же увидеть обработку ошибок у полей.

form.find('[name="' + key + '"]').addClass('error');

Антон Фомичёв

16 июля 2014, 10:19

Я бы предложил что-то такое:

$(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

Так откуда взять форму есть функция приема события одна, а форм на странице к примеру 5?

Антон Фомичёв

17 июля 2014, 13:23

Вижу два варианта.

Первый:
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

Нужно определять форму, которая возвращает af_complete, до работы с условиями, а не после. Это более универсально.

Андрей

06 октября 2014, 22:32

Здравствуйте. При отправке сообщений в IE выводится стандартное сообщение — Форма успешно отправлена, хотя в вызове формы прописано другое сообщение. Как устранить проблему?

Artsiom_Burkun

28 октября 2014, 09:04

Использую плагин xfpc. Соответственно возникли проблемы с ключами. Ошибка: «Не могу найти указанный ключ формы (action). ». Для незарегистрированных пользователей, конечно.

Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?

Володя

28 октября 2014, 09:31

в сессии github.com/bezumkin/AjaxForm/blob/master/core/components/ajaxform/model/ajaxform/ajaxform.class.php#L111
скорее всего у вас с ними что то не так…

А скорее всего дело в плагине…

Artsiom_Burkun

28 октября 2014, 11:11

Вопрос в том, что из кэша xfpc не передается $_SESSION['AjaxForm'] файлу assets/components/ajaxform/action.php.

Володя

28 октября 2014, 11:13

думаю выход кардинальный — не использовать xfpc, либо AjaxForm

Алексей

19 ноября 2014, 12:41

Володя добрый день!
Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!

Спасибо!

TITAN-UZ

21 декабря 2014, 02:28

Включите в вызов

&frontend_js=`assets/components/ajaxform/js/custom.js`

TITAN-UZ

21 декабря 2014, 04:39

Странно custom.js 404- not found :D но форма работает если убрать fronted_js то ошибка
Не могу найти указанный ключ формы (action)

Андрей

10 декабря 2014, 18:30

Добрый вечер! У меня возникла такая проблема, письмо отправляется но приходит вот в таком виде
Имя
[[+fi.name]]
E-mail
[[+fi.email]]
Сообщение
[[+fi.message]]
Очистить Отправить

т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?

Wassi Wassinen

12 декабря 2014, 03:26

Как не дать отработать submit до заполнения всех полей?

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

Заранее благодарен.

Василий Наумкин

12 декабря 2014, 06:55

1. Изменить стандартный javascript и добавить валидацию.

2. Забить и продолжать пользоваться валидацией FormIt, ибо любую проверку на фронте можно всегда обойти. А на стороне сервера — никак.

Wassi Wassinen

12 декабря 2014, 12:42

Я бы забил, но это плодит массу достигнутых целей при аналитике. Следовательно, е позволяет точно оценивать конверсию.

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

Заранее благодарен.

Василий Наумкин

12 декабря 2014, 13:27

Нет никакой проблемы — прикручивайте javascript валидатор к форме, чтобы он не давал её отправить. Даже, скорее всего, и стандартный javascript менять не придётся.

Ни AjaxForm, ни FormIt тут ничем не мешает и не помогает, это вообще другое.

Wassi Wassinen

13 декабря 2014, 01:02

Василий, я пробовал вешать 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

Это — функция, да. А как ты её вешаешь на форму?

Василий Наумкин

13 декабря 2014, 06:59

В общем, как бы ты не вешал событие на отправку формы — это будет просто 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

Добавил проверку afValidated в версию 1.0.4 — можно обновляться.

Переименовывать javascript и вносить в него правки больше не нужно. Просто запускай свой валидатор и выставляй переменную в true или false.

Василий Наумкин

13 декабря 2014, 08:36

И заодно написал страницу в документации, раз пошло такое дело.

Wassi Wassinen

13 декабря 2014, 12:16

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

Алексей Марченко

13 декабря 2014, 12:18

вот тут

Wassi Wassinen

13 декабря 2014, 12:25

Отправил. Спасибо еще раз!

Василий Наумкин

13 декабря 2014, 16:51

На здоровье!

Wassi Wassinen

02 февраля 2015, 18:37

Василий, вешаю твой скрипт на форму (форма в модальном окне):

<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

Забыл добавить — после первого нажатия кнопки «Отправить», помимо вышеописанного, почему-то срабатывает валидация формита, а не яваскрипт.

Wassi Wassinen

02 февраля 2015, 19:36

Василий, спасибо, разобрался. Косяк в моем коде.

Wassi Wassinen

09 февраля 2015, 13:11

Василий, а как поймать afComplete от определенной формы? У меня на странице их несколько и как только заполняют одну из них, событие срабатывает на всех.

Василий Наумкин

09 февраля 2015, 15:19

$(document).on('af_complete', function(event, response) {
	console.log(response.form);
});

Wassi Wassinen

09 февраля 2015, 16:07

Василий, отправлю пятьсотспасибо. Разъясни, а то я не понял.

У меня есть несколько форм на одной странице. У каждой свой id="". На событие af_complete от формы с id=«test-form» мне нужно повесить

parent.$(".close").click();

Как это реализовать?

Заранее благодарен.

Василий Наумкин

09 февраля 2015, 16:20

Разъясняю: в событие передаются данные от сервера + форма, с которой они были отправлены.

Форма находится в 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

Василий, спасибо и еще раз спасибо! Отправил! Если есть возможность, добавь в документацию. Очень нужная штука.

Это сообщение было удалено

TITAN-UZ

13 декабря 2014, 12:49

Респект! Спасибо за обновления!

Алексей Смирнов

20 декабря 2014, 21:46

Всем привет.
Не работает 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

В чанке у одного инпута стоит disabled, но на деле он появляется без этого атрибута. Так и должно быть?

Константин Ильин

30 января 2015, 02:41

Подскажите пожалуйста как сделать

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

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

В default.js надо что то дописать?

Сергей Бевзенко

02 июня 2015, 22:36

Добрый вечер!
При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.

Слава

11 июня 2015, 09:46

Всем привет. Подскажите как реализовать на MiniShop 2: Необходимо сделать минимальную сумму заказа, т.е. Оформление заказа должно совершаться если сумма заказов выше заданной (Например: 5000 р.)

Stan Ezersky

21 сентября 2015, 02:08

Привет!
А есть возможность использовать две формы на странице и как? У одной формы есть input hidden с хэшем, у второй формы пустой input hidden, соответственно по дефолту получаю «Не указан ключ формы (action).»
Как решить?

Василий Наумкин

21 сентября 2015, 04:09

Когда я в последний раз проверял — всё работало.

Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.

Stan Ezersky

21 сентября 2015, 13:17

Я так и не понял, что было, тупо переписал запросы с нуля.

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

<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

А как оно может работать, если отправка формы происходит через ajax? Страница не перезагружается, плейсхолдеры не обрабатываются.

Показывать/скрывать ошибки при таком подходе можно только через javascript — и в стандартных чанках это предусмотрено. А плейсхолдеры с ошибками там прописаны на случай работы без ajax (или вообще по привычке, не помню уже).

nekto

22 марта 2016, 14:29

Здравствуйте!
Пытаюсь отдать данные при отправки форма, использую 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

Добрый день! Подскажите такой вопрос — на сайте есть группа товаров, которые вызываются getresourses на главную страницу и на каждом есть кнопка — быстрый заказ. Хотелось бы реализовать pop-up форму, которая бы подгружала хотя бы заголовок товара, а лучше всего TV. Это реально?

Aborrol

07 октября 2019, 20:31

я это реализую передачей нужных данных из data атрибута кнопки в cкрытое поле при открытии формы с помощью js

B1M0

07 октября 2019, 20:34

Благодарю!

Андрей

07 октября 2019, 20:32

Реально, в чём проблема?

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты