Uncaught error recaptcha placeholder element must be empty - Исправление ошибок и поиск оптимальных решений проблем

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

I got message on console: ‘Uncaught Error: ReCAPTCHA placeholder element must be empty’
Please help me fix it

Thanks!

have not seen that before … can you reproduce with the demo app ?

My Controller:

My View:

I’m doing on localhost, so I can reproduce for you … Sorry @grosser

Thanks!

@trungnguyencmu Are you using turbolinks in your app?

I had the same issue when page is cached by turbolinks and user is leaving this page (to another page, handled by turbolinks) and then returns to the first page/view, where form with ReCAPTCHA is placed and has been rendered already (at first visit).

Here is problem example

I found out in rails 4 there is no problem, but in rails 5, if you visit page that has recaptcha first time, nothing happen, then you move to another page by click link and come back page error will show up

any idea for a fix … PR ?

I am not familiar with Ruby here is an idea after I read source code

<div id="g-recaptcha-container"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>
<script>

function recaptchaCallback (e) {
  var container = document.getElementById('g-recaptcha-container')
  container.innerHTML = ''
  var recaptcha = document.createElement('div')
  grecaptcha.render(recaptcha, {
    'sitekey': '6LewZh8TAAAAAG3YT_c17Gxxx'
  })
  container.appendChild(recaptcha)
}
</script>

can you turn that into a PR and link this here so the other users with the same issue can review ?

I’s hapend if i have two «recaptcha_tags» on the page.
Im loading the google recaptcha library twice.

might also be able to set a @script_tag_already_renderd … and then don’t render it twice

Is there any solution for this? I’m using <%= recaptcha_tags %> in ruby view file and I’m getting the same error

When you use recapthca_tag, it loads script library by default every time it renders.
You have to pass:script => false to stop injecting of script again and again.
<%= recaptcha_tag :script => false %>

recaptcha load twice in my app, check carefully … 🗡

Recaptcha load twice in your app 🍟

I got the same error but not because of having two tags on one page.

My issue was similar to what @designcitypl described. My pages are cached, so the placeholder wasn’t empty when the cached version was being shown.

I solved it by emptying the g-recaptcha element before the pages get cached by turbolinks.

document.addEventListener("turbolinks:before-cache", function() {
   $('.g-recaptcha').empty();
});

Note that I am using jquery, you probably don’t have to for this.

rokumatsumoto

added a commit
to rokumatsumoto/boyutluseyler
that referenced
this issue

May 29, 2019

Had the same issue. Solved thanks to @damonbakker !

Note that You Might Not Need jQuery™

document.addEventListener("turbolinks:before-cache", function () {
  document.querySelector(".g-recaptcha").innerHTML = "";
});

I’ll close this now since there are a few solutions already … if anyone has an idea how to turn that into a PR do!

Had the same issue. Solved thanks to @damonbakker !

Note that You Might Not Need jQuery™
document.addEventListener("turbolinks:before-cache", function () {
  document.querySelector(".g-recaptcha").innerHTML = "";
});

For those using a more recent version of Turbo, the code is almost exactly the same except that turbo replaces turbolinks:

document.addEventListener("turbo:before-cache", function () { document.querySelector(".g-recaptcha").innerHTML = ""; });

I have the same problem ith my react app

donrestarone

pushed a commit
to restarone/violet_rails
that referenced
this issue

Aug 16, 2022

donrestarone

added a commit
to restarone/violet_rails
that referenced
this issue

Aug 16, 2022

donrestarone

added a commit
to restarone/violet_rails
that referenced
this issue

Aug 16, 2022

Источник

Содержание

Uncaught Error: ReCAPTCHA placeholder element must be empty #217
Comments
Error ReCAPTCHA placeholder element must be empty #27
Comments
Your prestashop version
Eicaptcha Version
Do you use a specific theme
Issue description
ReCAPTCHA placeholder element must be empty #2
Comments
Multiple reCAPTCHA components using custom provider error #37
Comments
Uncaught Error: reCAPTCHA placeholder element must be empty ReCaptcha v2

Uncaught Error: ReCAPTCHA placeholder element must be empty #217

I got message on console: ‘Uncaught Error: ReCAPTCHA placeholder element must be empty’
Please help me fix it

The text was updated successfully, but these errors were encountered:

have not seen that before . can you reproduce with the demo app ?

My Controller:

I’m doing on localhost, so I can reproduce for you . Sorry @grosser

@trungnguyencmu Are you using turbolinks in your app?

I have the same error +1

same error +1 (same scenario described by @designcitypl )

Here is problem example

I found out in rails 4 there is no problem, but in rails 5, if you visit page that has recaptcha first time, nothing happen, then you move to another page by click link and come back page error will show up

any idea for a fix . PR ?

I am not familiar with Ruby here is an idea after I read source code

can you turn that into a PR and link this here so the other users with the same issue can review ?

I’s hapend if i have two «recaptcha_tags» on the page.
Im loading the google recaptcha library twice.

might also be able to set a @script_tag_already_renderd . and then don’t render it twice

Is there any solution for this? I’m using in ruby view file and I’m getting the same error

When you use recapthca_tag , it loads script library by default every time it renders.
You have to pass: script => false to stop injecting of script again and again.
false %>

recaptcha load twice in my app, check carefully . 🗡

Recaptcha load twice in your app 🍟

I got the same error but not because of having two tags on one page.

My issue was similar to what @designcitypl described. My pages are cached, so the placeholder wasn’t empty when the cached version was being shown.

I solved it by emptying the g-recaptcha element before the pages get cached by turbolinks.

Note that I am using jquery, you probably don’t have to for this.

Источник

Error ReCAPTCHA placeholder element must be empty #27

Your prestashop version

Eicaptcha Version

Do you use a specific theme

Issue description

Can you help me please? I have this error:

Uncaught Error: ReCAPTCHA placeholder element must be empty
at Object.Qr [as render] (VM5826 recaptcha__pt_pt.js:396)
at onloadCallback (contacte-nos:1296)
at VM5826 recaptcha__pt_pt.js:400
at Br (VM5826 recaptcha__pt_pt.js:391)
at VM5826 recaptcha__pt_pt.js:400
at VM5826 recaptcha__pt_pt.js:411

The text was updated successfully, but these errors were encountered:

The error message seems to well describe the issue.
Do you have a div an in your contact form page ?
Is this div empty ? ( If it’s not the case, the error is linked to that )

By the way you use an old version of the module.
Please download the latest release for prestashop 1.6 ( 0.4.x ) from this page
https://github.com/nenes25/eicaptcha/releases

I have a id and isn’t empty. The id must be empty?
I install a new version (v0.4.11) and the error, in contact page, still there.

As told in my previous comment :
Is this div empty ? ( If it’s not the case, the error is linked to that )

You have to let this div empty, so the recaptcha lib will add dynamically the captcha inside it.

Please let me know if everything is ok after.

Hello,
The div is empty and then is dynamically filled.

So everthing is ok now ?
Otherwise what is the problem ?

No, sorry. I think I misunderstood.
The div is filled when i’m in the page, I inspected. the reCaptcha is there but gives that error.

Can you send me an url ?

Have you made change in the module ?
The recaptcha library is loaded twice, that’s why you have an error.

How are your js optimisations configured ?
In the last 1.6.1.x version it works well with the current configuration

I have to try on a fresh 1.6.1.0 to check if it’s related with your ps version

I found the problem. I had «Move JavaScript to the end» activated. Now works because this option is disabled.
Thanks 👍 🙂

Sorry, another problem.
The recaptcha doesn’t validate. We do the check and the message isn’t sent.

My dev web server is currently down, so i’m not able to check or correct anything.
I hope to fix this by the end of the week in order to check issues during the next one.

OK, I Wait. Thanks.

I had Prestashop 1.6.0.11 and it was doing the same bug (the reCaptcha was working, but the email was not sent, the form was stuck with filled fields, no submit, no refresh).

Then i removed the module (and the override was cleared also, nice job nene!), I updated to PS 1.6.1.18 (latest subversion today), and reinstalled EiCaptcha. The form was submitted, but it was giving a generic «sending» error. Yet the message was not sent.

Then I [SOLVED] :). I forgot a really important thing: in new PS versions there is a security measure for the contact form, so you need to fix the old template of your theme, adding 2 hidden fields before the submit button. Now it is working. The problem was the theme.

I tried adding this code but did nothing. Doesn’t work.

Yes, your version (1.6.1.0) is older, and I am pretty sure it is not working for that reason (I had the same problem with my older version). Try to update PS to the latest subversion (1.6.1.18), they solved many bugs, and they finally supported PHP 7 (much faster, if you can use it in your server).
Don’t worry, do a full backup of files and database, so you can revert back safely. Then, using the module 1 Click Update you can update in less than 10 minutes (set it to work for slow server, then check to NOT disable your modules, let it update default theme and mails, you can disable data and images backups as you did it manually already. All should work very fine, then remember to fix the contact form template, as i told before).

I think I can’t update the version.

We have this module in another website, same version and it’s working.

If you confirmed that PS 1.6.1.0 is working then i guess the problem is strictly related to the theme (i suspect it because you switched Javascript from bottom to the head of the page and it started working, so it could be some script error, you should debug it with your browser console. but I can’t help you more from here. Anyway, in my general configuration i have all CCC enabled, and all is working).
May I ask you why you can’t update PS? Have you done some custom code in the core? If you haven’t, all should work fine. Then, perhaps your theme needs some bug fix, but this is another story :).

I made a small change in the backoffice but the client has already changed her mind about this functionality, so it isn’t important anymore.
This version’s update would imply that the website would remain in maintenance and I’m not sure if that’s what the client wants.

If I enable «Move JavaScript to the end» it gives me the initial error.

Hello,
The problem on your see may be linked with this issue #34
The new release give you the ability to change the default selector directly from the admin side.
As you can see on the screenshot :

Is the new release compatible with my version of Prestashop?

yes it’s a release for all ps version > 1.4 and

I installed the release 0.4.13 but the problem still there. The message isn’t sent.
I don’t have any error in console.

Can I do something else?

I think your only option is to take some time for maintenance, i could solve all my problems with older PS versions only updating, i had a PS 1.6.0 and also a very old PS 1.5.
Just take care of the override, if there is one already, do a backup, let EI captcha make it, then paste your old code and modify it manually with Ei Captcha functions, because i notice the automatic injection is failing inserting them.

Can the problem be from theme I’m using? I’m not using the default.

It is possible, as i said earlier, it is strange that changing javascript loading order you get errors, there could be something wrong in the template. Anyway, the main problem of «Captcha working, but PS not sending the email» is something different. I had the same issue in my 2 PS. After update the mail was working, and I haven’t changed the theme (also the PS 1.5 theme was working fine hopefully). I don’t know why it worked, but I guess something changed in the way PS sends email.

So I need update the PS. There is no other solution.

Yes, also, uninstall the module and reinstall it in the updated PS, i did it too for the «previously» PS 1.5, the module was installed but not working, then i resetted it with fresh installation and it worked.

Источник

ReCAPTCHA placeholder element must be empty #2

Currently I get the below javascript error on the checkout page.
recaptcha__en.js:352Uncaught Error: ReCAPTCHA placeholder element must be empty

This appears to be happening because the onepage checkout loads both the checkout as guest form and register at checkout form into the dom at the same time. Since the render callback uses the same div this error is being thrown. Could we dynamically name the div that is being rendered based on the form loading? I feel that would prevent this from happening.

Thank you for a great module. Others did not provide the simplicity and cleanness that yours offered by overriding the default captcha and you have a great readme/walkthrough.

The text was updated successfully, but these errors were encountered:

Which onestep checkout are you using?
I have tried with a couple, could not reproduce issue.

Also will help if you can supply a link to where i can view this issue in action.

The default magento onepage checkout is what we are using. Other information coming shortly

Ah, sorry, for some reason I read onestep! — checking with onepage now.

No problem. The site link I sent to you on magento connect private message if you have access to that. Guest checkout I am sure must be enabled as well so both html chunks render

All good. I can reproduce.
Fix soon.
On 23 May 2016 1:23 pm, «jledford-devops» notifications@github.com wrote:

No problem. The site link I sent to you on magento connect private message
if you have access to that. Guest checkout I am sure must be enabled as
well so both html chunks render

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#2 (comment)

Источник

Multiple reCAPTCHA components using custom provider error #37

I was able to create the custom provider to load the reCAPTCHA widget and allow for changing of the language. With two widgets on one page I get an error when loading:

The root looks to be that api.js is loaded multiple times.

After submitting and navigating away from the page,

The text was updated successfully, but these errors were encountered:

Hi! Thank you for this issue report. Could you please create a plunker that would show how to reproduce this issue?

On a side — what is the motivation behind having multiple recaptcha elements on a page?

@mattfirtion could you please re-verify the issue? It could have been resolved by a recaptcha update, as mentioned in #38 (comment)

Closing due to inactivity

Hey @DethAriel I just installed ng-recaptcha and I am having the same issue, I use one for my recover-password component and another for the change-password component.

On my SharedModule I import as:

import < RecaptchaLoaderService, RecaptchaModule, >from ‘ng-recaptcha’;
imports: [RecaptchaModule], providers: [RecaptchaLoaderService]
The recaptcha shows when navigating, but if I reaload I have the same issue as @mattfirtion.

Hey, @cassianomon ! Thx for your comment! Could you please open a separate issue and follow its template so that I can assist you further? A repro plunker would be great, btw 🙂

Источник

Uncaught Error: reCAPTCHA placeholder element must be empty ReCaptcha v2

This error appear after update plugins from 1.8.6 version to 1.9.0 version.
Screenshot has been link here.

We usually see this error whenever there are multiple versions of the ReCaptcha script on the same page. Do you have any other plugins that are using reCaptcha? Could you edit your question and add your website link into the URL field so that we may take a look?

We are using sage starter theme 9 for development so it’s error come only when plugins update from 1.8.6 to 1.9.0 but it’s ok in version 1.8.6.
I am using contact form 7.
My website url

This reply was modified 1 year, 2 months ago by pawandongoloutside .

We suspect something is wrong with the control attributes being added. If we inspect the form, we can see that for some reason, the tag is inside the ReCaptcha control. Looking at this plugin’s ReCaptcha code, this shouldn’t be.

We also see an additional attribute is added to the reCaptcha control, a data-callback which may not be terminated property causing a run-on. That is a guess, but something outside this plugin is causing the controls tag to jump inside the controls ReCaptcha tag, which should be empty.

Unfortunately, you will need to do some debugging on your end to narrow down the root cause. You may be able to use the WordPress Health Check plugin to safely disable plugins and revert to a default theme which may help narrow down the root cause. Please read their documentation for more information.

Should you have any further questions, you may reply back to this thread, and we can assist further. Have an excellent rest of your week!

Источник

Как исправить проблему с вкладками?

Всем добра и успехов!
Последнее время, заметил проблему такого рода:
Есть вкладки: Описание, Отзывы (0), Скачать, Калькулятор расхода.
По умолчанию содержимое вкладки ОПИСАНИЕ открыто.
Содержимое вкладки ОТЗЫВЫ, СКАЧАТЬ, КАЛЬКУЛЯТОР скрыто, и что бы прочитать надо кликнкуть на нужную вкладку.
Но последнее время, все эти вкладки открыты…
Вот что выдаёт консоль:

Uncaught Error: ReCAPTCHA placeholder element must be empty
at Wp (recaptcha__ru.js:489)
at recaptcha__ru.js:494
at Jp (recaptcha__ru.js:484)
at recaptcha__ru.js:493
at recaptcha__ru.js:505
/wp-includes/js/jquery/jquery-migrate.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
/wp-content/plugins/contact-form-7/includes/js/scripts.js:45 Uncaught TypeError: wpcf7.toggleSubmit is not a function
at HTMLFormElement. (/wp-content/plugins/contact-form-7/includes/js/scripts.js:45)
at Function.each (/wp-includes/js/jquery/jquery.js:2)
at a.fn.init.each (/wp-includes/js/jquery/jquery.js:2)
at HTMLDocument. (/wp-content/plugins/contact-form-7/includes/js/scripts.js:31)
at i (/wp-includes/js/jquery/jquery.js:2)
at Object.add [as done] (/wp-includes/js/jquery/jquery.js:2)
at n.fn.init.n.fn.ready (/wp-includes/js/jquery/jquery.js:2)
at a.fn.init.n.fn.init (/wp-includes/js/jquery/jquery.js:2)
at a.fn.init (/wp-includes/js/jquery/jquery-migrate.min.js:2)
at n (/wp-includes/js/jquery/jquery.js:2)

Возможно из-за этого вся проблема…
Но если так, то как исправить эти ошибки?
ссылка на сам сайт

Вопрос задан

более трёх лет назад
614 просмотров

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

Но последнее время, все эти вкладки открыты…

Потому что не инициализировался скрипт, который из Ваших div делает вкладки. А произойти это могло по многим причинам, одна из которых, произошла ошибка в коде ранее, чем инициализация.
Открываете консоль, смотрите ошибки, устраняете.
Судя по тегу «WORDPRESS» слово консоль могло Вас напугать. Поэтому я бы Вам рекомендовал сходить на фриланс, заплатить денюжку и решить вопрос. Не исключено, что там на пол часа работы. Так что цена вопроса с большой вероятностью лежит в пределах до 1000 рублей.
Не отнимайте хлеб у прогеров, костылями, которые Вы самостоятельно вставите. Их осталось не так много. Давайте их беречь и защищать. А лучше кормить и развлекать.

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

10 февр. 2023, в 04:49

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

10 февр. 2023, в 02:20

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

10 февр. 2023, в 01:33

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

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

Источник

Я использую recaptcha с моим приложением laravel.

Я просто хочу проверить ответ recaptcha на отправке формы с помощью jquery и остановить пользователя по предупреждению, чтобы проголосовать за проверку captcha.

но я не мог прекратить подачу формы, даже если captcha не заполнен.

вот мой код.

 $('#payuForm').on('submit', function (e) {

                    var response = grecaptcha.getResponse();

                    if(response.length == 0 ||  response == '' || response ===false ) {
                        alert('Please validate captcha.');
                        e.preventDefault();
                    }
                });



<div class="captcha">
 {{ View::make('recaptcha::display') }}
</div>

Я получаю эту ошибку в консоли браузера, и форма получает submit.

Error: ReCAPTCHA placeholder element must be empty

04 май 2016, в 10:04

Источник

6 ответов

Вы загружаете библиотеку 2 раза

выбрали

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

или

     <script src="https://www.google.com/recaptcha/api.js" async defer></script>

ztvmark
18 июль 2017, в 00:33

Я использую ContactForm7 для WordPress, который имеет встроенную интеграцию с Recaptcha. У меня также есть плагин BWP Recaptcha, который использует те же библиотеки recaptcha. Я ошибочно добавил ключи активации для обоих, что заставляло js-библиотеку загружаться дважды. Как только я удалил ключи из плагина CF7, ошибка исчезла.

Gary D
08 май 2017, в 22:55

Просто используйте это для каждой записи на странице, если вам нужна динамика, включая:

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer>
    </script>

    <div class="g-recaptcha"></div>

    <script>
        var onloadCallback = function() {
            //remove old
            $('.g-recaptcha').html('');

            $('.g-recaptcha').each(function (i, captcha) {
                grecaptcha.render(captcha, {
                    'sitekey' : 'your key'
                });
            });
        };
    </script>

Но он медленный. Вы также можете определить все recaptchas на странице изначально:
https://developers.google.com/recaptcha/docs/display

Дима Лобурец
26 июль 2017, в 12:57

WARNING: Tried to load angular more than once.

В AngularJs эта ошибка вызывает такие проблемы. Вы также можете проверить jquery.

MaazKhan47
22 июнь 2017, в 08:25

Такая же проблема может быть вызвана медленным подключением к Интернету.

Zaheer Abbas
27 дек. 2017, в 10:16

Ещё вопросы

0Ошибка компоновщика Duplicate Symbol при попытке связать libFlurryAds
1Android — кнопка изображения (XML) не работает?
1Как назвать классы проекта для другого проекта?
0Создать круговой выпадающий в div
0Сохранение части строки в другой строке с сохранением исходной строки. C ++
0Добавить новую строку в Datatable из табличных значений?
1Как прочитать гиперссылку изображения в Power Point с помощью c #
0SQL для возврата значений из отношения «многие ко многим»
0FullCalendar: открыть событие gcal в новой вкладке / окне
0Продолжительность между двумя раза в PHP MySQL
0Angular JS watch data из сервисного метода
1не удается импортировать проект sbt с JDK 1.8?
0Предупреждение: недопустимое смещение строки: php [duplicate]
0easyui «Объект не поддерживает это свойство или метод» в т. е. 9
0Реализация барьера с использованием мьютекса и семафора
1получить исключение при вставке событий в календарь Android
1Как перерисовать элемент таблицы SWT с помощью GC или перерисовать другие элементы таблицы?
1python matplotlib.patches: нарисуйте патч круга, но оставьте только часть круга
0Присоединение объекта в месте щелчка с абсолютной позицией
0Можно ли иметь, если еще в HTTP-запрос в угловых JS?
1Транспортир — Запустить сервер Selenium на заданном порту
1Форма: выберите весной MVC
0Мой первый столбец кода в простой консольной программе (c ++) заканчивается как мой последний столбец
1Конвертировать Lunar Lander для использования Opengl
0Как избежать записи файла ядра и ускорить генерацию трассировки
0Удалите точки и косую черту в начале по ссылке
0Как определить внутреннюю ширину браузера для мобильных устройств
1Изменить результаты таблицы данных в соответствии с вводом из текстового поля
0Странная ошибка ссылки при определении #ifdef #else
1Как настроить нетрадиционные отношения внешнего ключа?
0Код нарушается, когда якоря перекрываются KineticJS
0Установление имени, связанного с HTML-ссылкой
0Получение Uncaught TypeError: Невозможно прочитать свойство ‘push’ из неопределенного
1Ошибка при подключении к Estimote Beacon iOS
0Как рассчитать отдельные минуты за период времени
0MySQL не хранит микросекунды в datetime, но использует в где условия?
0Как изменить стиль текста вкладки браузера с помощью Javascript?
0Почему этот код OpenCV ничего не делает?
1Каков наилучший способ отобразить данные таблицы соединений в сущности Java?
1Ограничение службы WCF для ответа только на один запрос домена?
0Удаление и изменение элементов из ko.observableArray
1Android Несколько анимаций
1Рабочая роль Azure Что пошло не так до метода OnRun ()?
0jQuery Waypoint — Хотите изменить функцию
1VueJS не забирает переданные данные
0почему mozilla не поддерживает $ в jquery?
1ASP.NET Identity — проверка уникального адреса электронной почты пользователя в IdentityUser
2Java: получить имя объекта из входа сканера
1Как выполнить сложное / поэлементное матричное векторное умножение в numpy? [Дубликат]
1Самый эффективный способ удалить несколько вхождений значения с CouchDB

Источник