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

Question

aolko @aolko

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

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

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

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

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

Простой
Fetch дает ошибку?
- 1 подписчик
- час назад
- 35 просмотров
0

ответов
JavaScript

+1 ещё

Средний
При переходе на сайт из Telegram в мобильной версии, происходит подмена ссылки, как исправить?
- 1 подписчик
- 2 часа назад
- 23 просмотра
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 16 часов назад
- 274 просмотра
1

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

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

ответов
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 66 просмотров
1

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

Простой
Bitrix + Аспро: Next – как скрыть стоимость товаров цена которых ровна нулю?
- 1 подписчик
- вчера
- 26 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 33 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 145 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 181 просмотр
5

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм mini app игру и бота

23 нояб. 2024, в 20:48

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

Ведение блогоаи продвижение в Instagram, TikTok и Телеграмм

23 нояб. 2024, в 20:46

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

Доработки шаблона Wordpress

23 нояб. 2024, в 20:39

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 форма на Битрикс?

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

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

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