Ajax форма на Битрикс?

Question

aolko @aolko

Ajax форма на Битрикс?

Привет, я пишу ajax форму на битриксе и у меня возник вопрос - как можно обновить данные формы не скрывая её и не перезагружая страницы? Код js составляющей
p.s. почему-то не работает e.preventDefault();
upd: Попап окно (jquery) в котором находится форма - изменённый шаблон стандартного компонента формы, если подключать обычным образом форму с битрикс аяксом, страница будет перезагружаться после отправки данных формы и тогда пользователю придётся снова открывать форму (по умолчанию скрыта) ради того чтобы посмотреть сообщения битрикса (ошибки/отправлено), так быть не должно. Аякс должен работать непосредственно в попапе без перезагрузки страницы.

должно быть примерно так:

Вопрос задан более трёх лет назад
11352 просмотра

12 комментариев

Подписаться 2 Оценить 12 комментариев

Сергей @sabramovskikh

Что у вас возвращает data?

Написано более трёх лет назад
aolko @aolko Автор вопроса

По идее форму, на деле - всю страницу (вместе с формой)

Написано более трёх лет назад
Сергей @inkoder

p.s. почему-то не работает e.preventDefault();

Надо внимательно смотреть, что возвращает. И возвращать без тега <form></form>, только тело формы.

Т.к. происходит следующее - тег <form></form>
вкладывается в уже существующий тег <form></form>

Да, и битрикс тут совершенно не при чём. :)

Написано более трёх лет назад
aolko @aolko Автор вопроса

Сергей: точнее див с формой вкладывается в div#comp_рандомныесимволы

Написано более трёх лет назад

Сергей @inkoder

aolko:

<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<? 
error_reporting(E_ALL ^ E_NOTICE); // Для подавления NOTICE на неопределенное значение $_REQUEST['AJAX_REQUEST']

 ?>
<? if ($_REQUEST['AJAX_REQUEST'] !== 'Y') {?>
<form name='card-form' method='post' action='' id='card-form' class="card-form">
    <? } ?>
<input type='text' name='text1'>
<input type='submit' name='go' value='submit!'>
    <? if ($_REQUEST['AJAX_REQUEST'] !== 'Y') {?>
</form>
<? } ?>

<script>
$(document).ready(function () {
    // Отправка AJAX запроса
    $('body').on('submit', '.card-form', function(e) {      // Обработка отправки данных формыc
        e.preventDefault();                  // Сброс стандартного обработчика формы
        formData = $(this).serialize() + "&web_form_submit=Заказать карту";   
// Сохраняем массив введенных данных включая значение кнопки "Отправить", без этого компонент Битрикса не примет данные
        $.ajax({
            method: "POST",
            url: $(this).attr('action') + '?AJAX_REQUEST=Y',
            data: {formData},
            dataType: "html",
            success: function( data ) {
                //var FormData = $("#card-form").html(data);
                $("#card-form").html(data);
                //$('#card-form').append( data );
            }
        });
        e.preventDefault();
        return false;
    });
});
</script>
</body>

Вот в таком варианте - мы при запросе обновляем форму, потому. что получаем её обратно.

Написано более трёх лет назад

aolko @aolko Автор вопроса

Сергей:
* конкретный див формы не обновляется
* данные не приходят

Написано более трёх лет назад
aolko @aolko Автор вопроса

следует иметь ввиду что в data приходит html вообще всей страницы, как следствие нужно вытащить #card-form, так что $("#card-form").html(data); не работает

Написано более трёх лет назад
Сергей @inkoder

aolko: Что-то я не совсем понимаю. Что должно получиться в результате правильной работы всей этой штуки? И чем не устраивает AJAX_MODE=Y в стандартном компоненте веб-форм?

Написано более трёх лет назад
aolko @aolko Автор вопроса

Сергей:
при отправке полей (нажатие сабмита) должны выводится сообщения битрикса (ошибки/отправлено) и данные формы должны отправляться в битрикс без перезагрузки страницы (а значит без закрытия, обновления страницы и повторного открытия формы) (привет, битрикс аякс)
примерно так

Написано более трёх лет назад
Сергей @inkoder

aolko: И чем не устраивает AJAX_MODE=Y в стандартном компоненте веб-форм? www.inkoder.ru/tmp
dev.1c-bitrix.ru/community/forums/messages/forum6/...

Написано более трёх лет назад
Сергей @inkoder

aolko: c2n.me/3nlzXWd

Написано более трёх лет назад
aolko @aolko Автор вопроса

Сергей: "замылил" причину, проверьте мыло

Написано более трёх лет назад

Решения вопроса 1

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

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

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

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 5 часов назад
- 29 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 8 часов назад
- 40 просмотров
2

ответа
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 9 часов назад
- 43 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 9 часов назад
- 153 просмотра
1

ответ
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 9 часов назад
- 50 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 10 часов назад
- 61 просмотр
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 16 часов назад
- 21 просмотр
0

ответов
1С-Битрикс

+1 ещё

Простой
Внёс изменения в шаблон компонента, но изменения отображаются только когда проверяю их через админку, как это исправить?
- 1 подписчик
- 18 часов назад
- 18 просмотров
1

ответ
1С-Битрикс

Простой
Как вывести основной раздел инфоблока и его элементы?
- 1 подписчик
- вчера
- 36 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 100 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Доработка аддона для Xenforo v2.2.13

20 апр. 2024, в 06:06

200 руб./за проект

Привязка к Маркетплейсам 1С Розница 2.3

20 апр. 2024, в 05:26

10000 руб./за проект

Дописать функцию на Flutter, работа с yandex map kit

20 апр. 2024, в 04:18

3000 руб./за проект

По идее форму, на деле - всю страницу (вместе с формой)
p.s. почему-то не работает e.preventDefault();

Надо внимательно смотреть, что возвращает. И возвращать без тега <form></form>, только тело формы.

Т.к. происходит следующее - тег <form></form>
вкладывается в уже существующий тег <form></form>

Да, и битрикс тут совершенно не при чём. :)
Сергей: точнее див с формой вкладывается в div#comp_рандомныесимволы
aolko:
<html> <head> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <body> <? error_reporting(E_ALL ^ E_NOTICE); // Для подавления NOTICE на неопределенное значение $_REQUEST['AJAX_REQUEST'] ?> <? if ($_REQUEST['AJAX_REQUEST'] !== 'Y') {?> <form name='card-form' method='post' action='' id='card-form' class="card-form"> <? } ?> <input type='text' name='text1'> <input type='submit' name='go' value='submit!'> <? if ($_REQUEST['AJAX_REQUEST'] !== 'Y') {?> </form> <? } ?> <script> $(document).ready(function () { // Отправка AJAX запроса $('body').on('submit', '.card-form', function(e) { // Обработка отправки данных формыc e.preventDefault(); // Сброс стандартного обработчика формы formData = $(this).serialize() + "&web_form_submit=Заказать карту"; // Сохраняем массив введенных данных включая значение кнопки "Отправить", без этого компонент Битрикса не примет данные $.ajax({ method: "POST", url: $(this).attr('action') + '?AJAX_REQUEST=Y', data: {formData}, dataType: "html", success: function( data ) { //var FormData = $("#card-form").html(data); $("#card-form").html(data); //$('#card-form').append( data ); } }); e.preventDefault(); return false; }); }); </script> </body>

Вот в таком варианте - мы при запросе обновляем форму, потому. что получаем её обратно.
Сергей:
* конкретный див формы не обновляется
* данные не приходят
следует иметь ввиду что в data приходит html вообще всей страницы, как следствие нужно вытащить #card-form, так что $("#card-form").html(data); не работает
aolko: Что-то я не совсем понимаю. Что должно получиться в результате правильной работы всей этой штуки? И чем не устраивает AJAX_MODE=Y в стандартном компоненте веб-форм?
Сергей:
при отправке полей (нажатие сабмита) должны выводится сообщения битрикса (ошибки/отправлено) и данные формы должны отправляться в битрикс без перезагрузки страницы (а значит без закрытия, обновления страницы и повторного открытия формы) (привет, битрикс аякс)
примерно так
aolko: И чем не устраивает AJAX_MODE=Y в стандартном компоненте веб-форм? www.inkoder.ru/tmp
dev.1c-bitrix.ru/community/forums/messages/forum6/...
Сергей: "замылил" причину, проверьте мыло

Answer 1 · 2017-02-22 09:56:19

Заворачиваете форму в компонент.
Сама форма располагается в шаблоне (/templates/.default/template.php). Обработчик в component.php.
При запросе страницы с параметром (к примеру ajax=yes) отдаете компонент без шапки и подвала

...
if ($_REQUEST["ajax"] && ($_REQUEST["ajax"] == "yes")) {
	$APPLICATION->RestartBuffer();
	$this->IncludeComponentTemplate();
	die();
} else {
	$this->IncludeComponentTemplate();
}

В своем js, обязательно!, делаете e.preventDefault() сабмита формы, а не клика на кнопку. Биндите новый обработчик клика на кнопку (ajax запрос на эту же страницу с параметром ajax=yes)

Answer 2 · 2015-09-15 09:59:39

А почему пишете с нуля?
Воспользуйтесь стандартным компонентом Веб-формы и в параметрах компонента допишите:
AJAX_MODE=>"Y"
Тем самым вы включите стандартную обработку формы аяксом битрикса.

Answer 3 · 2015-10-22 23:25:25

Аналогичная проблема стоит для редакции "Старт". Сам еще не реализовал, но могу вам предложить сделать компонент формы, у которой action будет вести на текущую страницу. Тем самым, когда ajax-запрос дойдет до нужного куска страницы(то есть до текущего компонента), вы очищаете буфер и возвращаете результат пользователю. Необходимо продумать только идентификацию формы : id формы + текущий шаблон.

Ajax форма на Битрикс?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт