Обновление капчи без перезагрузки страницы

Иногда требуется капча, которую можно бы было обновить динамически, без перезагрузки страницы. Задача очень простая, довольно часто встречающаяся, но ее решения нет в стандартных компонентах битрикса.

Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:

<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;}

размеры whiteBlock такие же как у капчи. Смысл в том, чтобы whiteBlock был полностью поверх картинки с капчей, а внутри этого белого блока отцентрированно находилась картинка, показывающая процесс подгрузки данных. Получить такую картинку можно тут.

Ссылка 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>

Предварительно библиотека jquery должна быть подключена. В папке шаблона компонента, там где лежит файл template.php, создать файл reload_captcha.php со следующим содержанием:

<?php
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
echo json_encode($APPLICATION->CaptchaGetCode()); 
?>
		

Комментарии

Сделать заказ

Нажимая на кнопку "Заказать", вы даете согласие на обработку персональных данных

Или напишите нам на info@365mg.ru

Узнайте, что Вы можете ПРИОБРЕСТИ написав нам сегодня

Пока не готов
*Мы гарантируем, что ваши контакты не будут переданы третьим лицам