[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 у полей для вывода ошибок в стандартной форме. Он теперь добавляется автоматически, если форма не прошла валидацию.
Обновляемся, тестируем, пишем замечания и предложения.
18 июня 2014, 02:07
Комментарии: 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>
Эти конструкции не помогут, потому что форма отправляется через 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('Не добавлено');
}
Мужик, об этом весь топик и написан. Даже с кодом, который тебе нужен:
А по теме — Вась, спасибо! Как всегда всё годно и в лучшем виде)
Отпуска тебе охрененного!
$(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]]`
]]
В конструкции
В соответствии с API jQuery дополнительные параметры передаются обработчику начиная со второго аргумента функции.
То есть так:
$(document).on('af_complete', function(res) {
console.log(res);
});В соответствии с API jQuery дополнительные параметры передаются обработчику начиная со второго аргумента функции.
То есть так:
$(document).on('af_complete', function(event,res) {
console.log(res);
});
Я бы предложил что-то такое:
Ну и твой сниппет должен отдавать json с полями success и key по меньшей мере.
$(document).on('af_complete', function(event,res) {
if(!res.success){
form.find('[name="' + res.key + '"]').addClass('error');
}
});Ну и твой сниппет должен отдавать json с полями success и key по меньшей мере.
Вижу два варианта.
Первый:
1. У каждой из форм есть атрибут id, а так же тэг
3. Тогда обработчик события выглядит следующим образом:
1. Через гитхаб или как-то по-другому предложить Василию изменить часть кода default.js таким образом:
Первый:
1. У каждой из форм есть атрибут id, а так же тэг
<input type="hidden" name="formid" value="[[+значение атрибута id]]">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);$(document).on('af_complete', function(event,res,form) {
var $form = $(form);
if(!res.success){
$form.find('[name="' + res.key + '"]').addClass('error');
}
});
Использую плагин xfpc. Соответственно возникли проблемы с ключами. Ошибка: «Не могу найти указанный ключ формы (action). ». Для незарегистрированных пользователей, конечно.
Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?
Где вообще хранятся ключи? Форма, то начала отправлять, но пришлось вносить данные в action.php что ни есть хорошо. Может, есть лучшее решение?
в сессии github.com/bezumkin/AjaxForm/blob/master/core/components/ajaxform/model/ajaxform/ajaxform.class.php#L111
скорее всего у вас с ними что то не так…
А скорее всего дело в плагине…
скорее всего у вас с ними что то не так…
А скорее всего дело в плагине…
Володя добрый день!
Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!
Спасибо!
Выскакивает ошибка «Не могу найти указанный ключ формы (action).», но только в Opera в остальных все работает. Хотя action вроде есть «af_action:fe59f32563f46ab8a985edd0e125005b», всю голову сломал. Не подскажите куда копать. И еще, не подскажите, как решить вопрос с кешированием, если не использовать xfpc. Я только начинаю работать с Modx!
Спасибо!
Добрый вечер! У меня возникла такая проблема, письмо отправляется но приходит вот в таком виде
Имя
[[+fi.name]]
E-mail
[[+fi.email]]
Сообщение
[[+fi.message]]
Очистить Отправить
т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?
Имя
[[+fi.name]]
[[+fi.email]]
Сообщение
[[+fi.message]]
Очистить Отправить
т.е. вместо значений введенных в input мне приходят плэйсхолдеры(если неправильно назвал прошу простить я совсем новичек в этом деле), подскажите где искать причину ошибки?
Василий, я пробовал вешать 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;
}
Василий, вешаю твой скрипт на форму (форма в модальном окне):
Вешаю вот такую валидацию полей:
В чем может быть дело?
Заранее благодарен.
<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>В чем может быть дело?
Заранее благодарен.
Разъясняю: в событие передаются данные от сервера + форма, с которой они были отправлены.
Форма находится в 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
Подскажите пожалуйста как сделать
После отправки полям добавляется класс error.
К примеру у меня он с красным бекграундом, т.е как бы те поля которые не прошли валидацию будут красными.
Все как бы ок.
Но если ввести все правильно повторно и поле проходит валидацию error не удаляется. И соответственно поле остается с красным бекграундом.
В default.js надо что то дописать?
После отправки полям добавляется класс error.
К примеру у меня он с красным бекграундом, т.е как бы те поля которые не прошли валидацию будут красными.
Все как бы ок.
Но если ввести все правильно повторно и поле проходит валидацию error не удаляется. И соответственно поле остается с красным бекграундом.
В default.js надо что то дописать?
Добрый вечер!
При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.
При переносе сайта на сервер pagemaster возникла странная ошибка. AjaxForm возвращает ошибку о том, что email не валидный. Но хуки Formit (отправка на email и запись в базу) выполняются. Есть другая форма на этом сайте (без email). Так вот она отправляется ОК. Возвращает success.
На тестовом такой проблемы нет. Поэтому непонятно в чем может быть проблема.
Когда я в последний раз проверял — всё работало.
Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.
Тестовый сайт уже давно отключен, но можно просто взять код из примера и проверить у себя.
Я так и не понял, что было, тупо переписал запросы с нуля.
Возник такой вопрос, почему не работает добавление класса, если есть ошибка:
Возник такой вопрос, почему не работает добавление класса, если есть ошибка:
<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>
А как оно может работать, если отправка формы происходит через 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. Это реально?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| AjaxForm | 1.2.2-pl от 17.10.2021 | 19 479 |
| pdoTools | 2.13.2-pl от 02.09.2021 | 54 140 |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 131 |
28 декабря 2024, 20:17
кнопки для сортировок находятся отдельно от тегаПочему кнопки? Сортировка это обычно выпадающий список, можно ещё переключателями сделать. И список и ...
27 декабря 2024, 15:56
Ух, класс! Вот так работает:
$array = array(111, 112);
if(in_array($modx->controller->resource->get('id'), $array)) {
$modx->regC...
27 декабря 2024, 13:50
Огромнейшее спасибо! Работает.
26 декабря 2024, 12:43
А как вы в шаблоне письма вывели имя пользователя? У меня просто в шаблоне отрабатывает. А в письме нет.
[[$user.name]]
[[$us...
26 декабря 2024, 11:10
Слышу эту песню про программирование — уже с лет 20 точно.
Но пока «мы» даже сверстать макет не можем автоматически, чтобы можно было в продакшен о...
25 декабря 2024, 14:13
В итоге переписала сама. Не знаю можно ли вставлять сюда столько текста, так что чистый JS код, если кому надо, можно найти по ссылке
24 декабря 2024, 21:46
Это не косяк, это осознанное изменение. Я считаю, что нет смысла показывать «Форма содержит ошибки» и ещё сами ошибки. Однако само сообщение в ответе ...
23 декабря 2024, 18:04
Для версии 3 лучше конечно иметь типа minishop3.
Да для всего этого нужно свободное время конечно же.
