Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Клиенты хотят видеть капчу, которую можно бы было обновить динамически, без перезагрузки страницы. Задача очень простая, довольно часто встречающаяся, но я не видел ее решения в стандартных компонентах битрикса или где-то на форуме.
В конкретном примере я расскажу, как я кастомизировал компонент iblock.element.add.form, но думаю никому не составит труда применить это решение и к другим компонентам.
Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:
в стилях нужно прописать
размеры whiteBlock такие же как у капчи. Смысл в том, чтобы whiteBlock был полностью поверх картинки с капчей, а внутри этого белого блока отцентрированно находилась картинка, показывающая процесс подгрузки данных. Получить такую картинку можно .
моя капча выглядела так:
а во время подгрузки новой капчи (так:
.ssl.1c-bitrix-cdn.ru/blog/4c3/captcha2.jpg)
ссылка reloadCaptcha (есть ссылка, по клику которой будет обновляться капча). В лэнг-файле я прописал $MESS ['RELOAD_CAPTCHA'] = 'Поменять картинку'
В файле шаблона с формой добавить:
Предварительно библиотека jquery должна быть подключена.
В папке шаблона компонента, там где лежит файл template.php, создать файл reload_captcha.php со следующим содержанием:
вот и все)
Назад в раздел
то ждем ваше обращение в нашей службе тех поддержки.
Карта разработчика магазина на 1С-Битрикс — с чего начинать и куда смотреть, когда сайт уже продаёт: PHP, каркас, витрина, git, обмены, дыры. Закрывать все клетки не нужно.
Обновление капчи без перезагрузки страницы
Возможно эта тема где-то была, но на форуме не нашел, поэтому решил написать тут у себя, чтобы полежало..Клиенты хотят видеть капчу, которую можно бы было обновить динамически, без перезагрузки страницы. Задача очень простая, довольно часто встречающаяся, но я не видел ее решения в стандартных компонентах битрикса или где-то на форуме.
В конкретном примере я расскажу, как я кастомизировал компонент iblock.element.add.form, но думаю никому не составит труда применить это решение и к другим компонентам.
Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:
<div id="captchaBlock"> <div id="whiteBlock"> <img id="loaderImg" src="<?=SITE_TEMPLATE_PATH?>/i/ajax-loader.gif" /> </div> <input id="captchaSid" type="hidden" name="captcha_sid" value="<?=$arResult['CAPTCHA_CODE']?>" /> <img id="captchaImg" src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult['CAPTCHA_CODE']?>" width="180" height="40" alt="CAPTCHA" /> <a id="reloadCaptcha"><?=GetMessage('RELOAD_CAPTCHA')?></a> </div> |
/*--CAPTCHA--*/ #captchaBlock{position:relative;} #captchaBlock #whiteBlock{display:none; text-align:center; position:absolute; background-color:#FFF; width:180px; height:40px;} #captchaBlock #whiteBlock #loaderImg{margin-top:3px;} |
моя капча выглядела так:
а во время подгрузки новой капчи (так:
ссылка reloadCaptcha (есть ссылка, по клику которой будет обновляться капча). В лэнг-файле я прописал $MESS ['RELOAD_CAPTCHA'] = 'Поменять картинку'
В файле шаблона с формой добавить:
<script type="text/javascript"> $(document).ready(function(){ $('#reloadCaptcha').click(function(){ $('#whiteBlock').show(); $.getJSON('<?=$this->__folder?>/reload_captcha.php', function(data) { $('#captchaImg').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data); $('#captchaSid').val(data); $('#whiteBlock').hide(); }); return false; }); }); </script> |
В папке шаблона компонента, там где лежит файл template.php, создать файл reload_captcha.php со следующим содержанием:
<?php require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php'); echo json_encode($APPLICATION->CaptchaGetCode()); ?> |
Назад в раздел
Подписаться на новые материалы раздела:
