[AjaxForm] Версия 1.0.2-pl
В репозитории Simple Dream доступна новая версия компонента AjaxForm.
Список изменений:
Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
[#4] Если в системе установлен pdoTools, то чанк с формой будет обрабатывать именно он, а значит вы можете использовать @INLINE чанки. Напоминаю, что в них не работают сниппеты и фильтры!
[#3] Теперь можно выставлять плейсхолдеры в форме, указав их в параметре сниппета. То есть:
[#2] Убрал класс error у полей для вывода ошибок в стандартной форме. Он теперь добавляется автоматически, если форма не прошла валидацию.
Обновляемся, тестируем, пишем замечания и предложения.
Список изменений:
Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
$(document).on('af_complete', function(event, response) {
console.log(event, response);
});
[#4] Если в системе установлен pdoTools, то чанк с формой будет обрабатывать именно он, а значит вы можете использовать @INLINE чанки. Напоминаю, что в них не работают сниппеты и фильтры!
[#3] Теперь можно выставлять плейсхолдеры в форме, указав их в параметре сниппета. То есть:
[[!AjaxForm?fi.name=`Петр Петрович`]]
заполнит имя в дефолтном чанке.[#2] Убрал класс error у полей для вывода ошибок в стандартной форме. Он теперь добавляется автоматически, если форма не прошла валидацию.
Обновляемся, тестируем, пишем замечания и предложения.
Комментарии: 67
Василий, посоветуйте, а как православно ловить ошибки? Я использую вот такие конструкции:
<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'у. Почему-то этого сейчас не происходит. Как это правильнее сделать?
Эти конструкции не помогут, потому что форма отправляется через ajax и страница не перезагружается. Так что, парсер MODX тут ничего не сделает.
Нужно или поменять javascript, или установить новую версию и удалить в своём чанке везде класс «error» — он будет добавляться автоматически теперь.
Ну и вместо has-error заменить оформление на error, понятное дело.
Нужно или поменять javascript, или установить новую версию и удалить в своём чанке везде класс «error» — он будет добавляться автоматически теперь.
Ну и вместо has-error заменить оформление на error, понятное дело.
Ух ты! Похоже эта моя проблема уже решена с коробки: modx.pro/help/3243/!
Будем эксперементировать…
Будем эксперементировать…
Специально для тебя и добавил =)
А как получить информацию из 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. Или я что-то недопонимаю?
Пытаюсь понять, если я вывожу форму в модальном окне, что мне ловить в jQuery, чтобы закрыть его или заменить форму на сообщение об успехе?
Заранее благодарен.
Заранее благодарен.
Мужик, об этом весь топик и написан. Даже с кодом, который тебе нужен:
А по теме — Вась, спасибо! Как всегда всё годно и в лучшем виде)
Отпуска тебе охрененного!
$(document).on('af_complete', function(res) {
if (res.success) {
// показываем сообщение об успехе, по таймауту закрываем модалку
} else {
// закрывать ничего не надо, ибо ошибка и юзер должен её исправлять
}
});
А по теме — Вась, спасибо! Как всегда всё годно и в лучшем виде)
Отпуска тебе охрененного!
Спасибо, друг!
Спасибо! Я в этих делах не силен. Этот ответ будет разным для нескольких форм
на странице?
на странице?
Спасибо за отличный компонент.
Единственное, не могу понять — почему, когда приходит письмо, в заголовке «От» вместо имени отправителя стоит просто [[+fi.name]]?
Вызов сниппета, в данном случае, такой:
Единственное, не могу понять — почему, когда приходит письмо, в заголовке «От» вместо имени отправителя стоит просто [[+fi.name]]?
Вызов сниппета, в данном случае, такой:
[[!AjaxForm?
&snippet=`FormIt`
&form=`chn_ContactFormTpl`
&hooks=`spam,email,emailUser,redirect`
&emailSubject=`Сообщение с сайта`
&emailTo=`xxx@xxx.xx`
&emailFromName=`[[+name]]`
]]
Причем, сначала было нормально (отображалось имя пользователя), потом, одно время, туда прописывалось, почему-то, имя чанка (chn_ContactFormTpl), а сейчас отображается просто [[+fi.name]].
Странно… Убрал
&emailFromName=`[[+name]]`
— стало нормально, в заголовках письма в поле «От» теперь эл. адрес отправителя.
При обработке параметра выходило
А сейчас ты убрал пустой параметр, и там стало значение по умолчанию. Сам сломал — сам починил.
&emailFromName=``
То есть — пустота, потому что плейсхолдера name на странице, при вызове сниппета не было.А сейчас ты убрал пустой параметр, и там стало значение по умолчанию. Сам сломал — сам починил.
Понял, спасибо!
В конструкции
В соответствии с API jQuery дополнительные параметры передаются обработчику начиная со второго аргумента функции.
То есть так:
$(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);
});
Это верно подмечено.
Установил новую версию, но если на странице 3 формы, то не понятно к какой относится это сообщение, нет указания на форму.
Так же класс error автоматически не указывается для полей формы, может быть потому что их несколько.
Установил новую версию, но если на странице 3 формы, то не понятно к какой относится это сообщение, нет указания на форму.
Так же класс error автоматически не указывается для полей формы, может быть потому что их несколько.
Посмотрел код, неправильно понял фразу или она неправильно написана, вообщем хотелось бы так же увидеть обработку ошибок у полей.
form.find('[name="' + key + '"]').addClass('error');
Я бы предложил что-то такое:
Ну и твой сниппет должен отдавать json с полями success и key по меньшей мере.
$(document).on('af_complete', function(event,res) {
if(!res.success){
form.find('[name="' + res.key + '"]').addClass('error');
}
});
При этом, не забудь определить переменную form (она должна содержать объект jQuery).Ну и твой сниппет должен отдавать json с полями success и key по меньшей мере.
Так откуда взять форму есть функция приема события одна, а форм на странице к примеру 5?
Вижу два варианта.
Первый:
1. У каждой из форм есть атрибут id, а так же тэг
3. Тогда обработчик события выглядит следующим образом:
1. Через гитхаб или как-то по-другому предложить Василию изменить часть кода default.js таким образом:
Первый:
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');
}
});
Нужно определять форму, которая возвращает af_complete, до работы с условиями, а не после. Это более универсально.
Здравствуйте. При отправке сообщений в IE выводится стандартное сообщение — Форма успешно отправлена, хотя в вызове формы прописано другое сообщение. Как устранить проблему?
Использую плагин xfpc. Соответственно возникли проблемы с ключами. Ошибка: «Не могу найти указанный ключ формы (action). ». Для незарегистрированных пользователей, конечно.
Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?
Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?
в сессии github.com/bezumkin/AjaxForm/blob/master/core/components/ajaxform/model/ajaxform/ajaxform.class.php#L111
скорее всего у вас с ними что то не так…
А скорее всего дело в плагине…
скорее всего у вас с ними что то не так…
А скорее всего дело в плагине…
Вопрос в том, что из кэша xfpc не передается $_SESSION['AjaxForm'] файлу assets/components/ajaxform/action.php.
думаю выход кардинальный — не использовать xfpc, либо AjaxForm
Володя добрый день!
Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!
Спасибо!
Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!
Спасибо!
Включите в вызов
&frontend_js=`assets/components/ajaxform/js/custom.js`
Странно custom.js 404- not found :D но форма работает если убрать fronted_js то ошибка
Не могу найти указанный ключ формы (action)
Не могу найти указанный ключ формы (action)
Добрый вечер! У меня возникла такая проблема, письмо отправляется но приходит вот в таком виде
Имя
[[+fi.name]]
E-mail
[[+fi.email]]
Сообщение
[[+fi.message]]
Очистить Отправить
т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?
Имя
[[+fi.name]]
[[+fi.email]]
Сообщение
[[+fi.message]]
Очистить Отправить
т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?
Как не дать отработать submit до заполнения всех полей?
Сейчас, даже если валидация полей не пройдена, скрипт на onsubmit срабатывает.
Заранее благодарен.
Сейчас, даже если валидация полей не пройдена, скрипт на onsubmit срабатывает.
Заранее благодарен.
1. Изменить стандартный javascript и добавить валидацию.
2. Забить и продолжать пользоваться валидацией FormIt, ибо любую проверку на фронте можно всегда обойти. А на стороне сервера — никак.
2. Забить и продолжать пользоваться валидацией FormIt, ибо любую проверку на фронте можно всегда обойти. А на стороне сервера — никак.
Я бы забил, но это плодит массу достигнутых целей при аналитике. Следовательно, е позволяет точно оценивать конверсию.
Если есть возможность, поясни как победить проблему. Спасибо скину сразу.
Заранее благодарен.
Если есть возможность, поясни как победить проблему. Спасибо скину сразу.
Заранее благодарен.
Нет никакой проблемы — прикручивайте javascript валидатор к форме, чтобы он не давал её отправить. Даже, скорее всего, и стандартный javascript менять не придётся.
Ни AjaxForm, ни FormIt тут ничем не мешает и не помогает, это вообще другое.
Ни AjaxForm, ни FormIt тут ничем не мешает и не помогает, это вообще другое.
Василий, я пробовал вешать 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>
Никакого эффекта — форма уходит.
Это — функция, да. А как ты её вешаешь на форму?
В общем, как бы ты не вешал событие на отправку формы — это будет просто 2 независимых обработки этого события. То есть, сначала сработает твоё, а потом, независимо от него, сработает отправка.
Поэтому, нужно научить скрипт AjaxForm смотреть в результаты работы твоей проверки.
Вешаем свой валидатор на форму с классом .ajax_form:
А дальше копируем родной javascript в custom.js и добавляем проверку afValidated перед отправкой вот здесь:
Поэтому, нужно научить скрипт 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 — форма не отправится.
Добавил проверку afValidated в версию 1.0.4 — можно обновляться.
Переименовывать javascript и вносить в него правки больше не нужно. Просто запускай свой валидатор и выставляй переменную в true или false.
Переименовывать javascript и вносить в него правки больше не нужно. Просто запускай свой валидатор и выставляй переменную в true или false.
И заодно написал страницу в документации, раз пошло такое дело.
Василий, большое тебе, человеческое спасибо! Никак не могу найти на безумкин.ру где спасибо отправить.
Отправил. Спасибо еще раз!
На здоровье!
Василий, вешаю твой скрипт на форму (форма в модальном окне):
Вешаю вот такую валидацию полей:
В чем может быть дело?
Заранее благодарен.
<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». В чем может быть дело?
Заранее благодарен.
Забыл добавить — после первого нажатия кнопки «Отправить», помимо вышеописанного, почему-то срабатывает валидация формита, а не яваскрипт.
Василий, спасибо, разобрался. Косяк в моем коде.
Василий, а как поймать afComplete от определенной формы? У меня на странице их несколько и как только заполняют одну из них, событие срабатывает на всех.
$(document).on('af_complete', function(event, response) {
console.log(response.form);
});
Василий, отправлю пятьсотспасибо. Разъясни, а то я не понял.
У меня есть несколько форм на одной странице. У каждой свой id="". На событие af_complete от формы с id=«test-form» мне нужно повесить
Заранее благодарен.
У меня есть несколько форм на одной странице. У каждой свой id="". На событие af_complete от формы с id=«test-form» мне нужно повесить
parent.$(".close").click();
Как это реализовать? Заранее благодарен.
Разъясняю: в событие передаются данные от сервера + форма, с которой они были отправлены.
Форма находится в response.form:
Форма находится в response.form:
$(document).on('af_complete', function(event, response) {
var form = response.form;
if (form.attr('id') == 'твой_id') {
//Делаем что хотим с формой
form.hide();
}
});
Василий, спасибо и еще раз спасибо! Отправил! Если есть возможность, добавь в документацию. Очень нужная штука.
Это сообщение было удалено
Это сообщение было удалено
Респект! Спасибо за обновления!
Всем привет.
Не работает AjaxForm при использовании прикрепления файла в IE 8 и 9 как минимум. (опера, хром в норме)
Если указать в поле enctype=«multipart/form-data»:
Пишет ошибку в ие:
Не работает 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
Куда копать подскажите пожалуйста.?
В чанке у одного инпута стоит disabled, но на деле он появляется без этого атрибута. Так и должно быть?
Подскажите пожалуйста как сделать
После отправки полям добавляется класс error.
К примеру у меня он с красным бекграундом, т.е как бы те поля которые не прошли валидацию будут красными.
Все как бы ок.
Но если ввести все правильно повторно и поле проходит валидацию error не удаляется. И соответственно поле остается с красным бекграундом.
В default.js надо что то дописать?
После отправки полям добавляется класс error.
К примеру у меня он с красным бекграундом, т.е как бы те поля которые не прошли валидацию будут красными.
Все как бы ок.
Но если ввести все правильно повторно и поле проходит валидацию error не удаляется. И соответственно поле остается с красным бекграундом.
В default.js надо что то дописать?
Добрый вечер!
При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.
При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.
Всем привет. Подскажите как реализовать на MiniShop 2: Необходимо сделать минимальную сумму заказа, т.е. Оформление заказа должно совершаться если сумма заказов выше заданной (Например: 5000 р.)
Привет!
А есть возможность использовать две формы на странице и как? У одной формы есть input hidden с хэшем, у второй формы пустой input hidden, соответственно по дефолту получаю «Не указан ключ формы (action).»
Как решить?
А есть возможность использовать две формы на странице и как? У одной формы есть input hidden с хэшем, у второй формы пустой input hidden, соответственно по дефолту получаю «Не указан ключ формы (action).»
Как решить?
Когда я в последний раз проверял — всё работало.
Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.
Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.
Я так и не понял, что было, тупо переписал запросы с нуля.
Возник такой вопрос, почему не работает добавление класса, если есть ошибка:
Возник такой вопрос, почему не работает добавление класса, если есть ошибка:
<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`]]?
А как оно может работать, если отправка формы происходит через ajax? Страница не перезагружается, плейсхолдеры не обрабатываются.
Показывать/скрывать ошибки при таком подходе можно только через javascript — и в стандартных чанках это предусмотрено. А плейсхолдеры с ошибками там прописаны на случай работы без ajax (или вообще по привычке, не помню уже).
Показывать/скрывать ошибки при таком подходе можно только через javascript — и в стандартных чанках это предусмотрено. А плейсхолдеры с ошибками там прописаны на случай работы без ajax (или вообще по привычке, не помню уже).
Здравствуйте!
Пытаюсь отдать данные при отправки форма, использую ajaxForm и formIt.
В сниппете возращаю
Пытаюсь отдать данные при отправки форма, использую ajaxForm и formIt.
В сниппете возращаю
return $AjaxForm->success('Спасибо', $new->toArray());
но от сервера приходит пустой массив data: []
message: "Спасибо за отзыв!"
success: true
Если отправлять данные в лог, то все ок $modx->log(xPDO::LOG_LEVEL_ERROR, $AjaxForm->success('Спасибо', $new->toArray()));
В чем может быть проблема, никто не сталкивался?
Добрый день! Подскажите такой вопрос — на сайте есть группа товаров, которые вызываются getresourses на главную страницу и на каждом есть кнопка — быстрый заказ. Хотелось бы реализовать pop-up форму, которая бы подгружала хотя бы заголовок товара, а лучше всего TV. Это реально?
я это реализую передачей нужных данных из data атрибута кнопки в cкрытое поле при открытии формы с помощью js
Благодарю!
Реально, в чём проблема?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.