Uncaught Error: ReCAPTCHA placeholder element must be empty - wordpress

I am getting below mentioned error in Browser Console. I have used Contact form 7 and Google Captcha in wordpress site.
(1) Uncaught Error: ReCAPTCHA placeholder element must be empty
(2) Uncaught error: invalid recaptcha client id: undefined
Can please assist me to fix these issues.

Remove this from the <head></head>. It’s redundant.
<script src='https://www.google.com/recaptcha/api.js'></script>

This is old, and might be a duplicate, but this is the page I found trying to solve my problem, so I figured I'd add something towards an answer here.
I was getting the "ReCAPTCHA placeholder element must be empty" error, and it was because the recaptcha script was being called multiple times. I was able to resolve this with a custom callback on the recaptcha's onload event:
var recaptchacalls = 0;
var onloadCallback = function(e) {
grecaptcha.render('cap-' + recaptchacalls, {
'sitekey' : '<SITE_KEY_HERE>'
});
recaptchacalls++;
};
Note the count of how many times the script is called, using that as a unique identifier for the specific container that we need to be empty.
I would venture a guess that the other error is related, non-specific identifiers in multiple calls resulting in actions being attempted on the wrong object.

Related

Uncaught (in promise) FirebaseError: Invalid document reference. Document references must have an even number of segments

Well, My issue is different.. I created a modal form like this:
Modal Form
There is no issue at all and my data can be edited easily:
Updates with no errors
Now, I started to replace the text area with Vue2-editor plugin and the resulting design is like the following:
Vue-text-editor
I tried to modify the texts and save:
Error
Here is my updating mechanism:
updateProduct() {
// Update function has issues so I have to apply this work-around
this.$firestore.products.doc(this.product['.key']).set(this.product).then(() => {
this.$firestore.products.doc(this.activeItem).delete()}).then(()=>{
this.$refs.edit.hide()
toast.fire({
type: 'success',
title: 'Updated successfully'
});
});
},
Well, the firebase update function does not work at all. I have researched this, but in vain - this is the only working workaround for it.
Now I need to figure out what's wrong with that text editor.
Your problem is here:
this.$firestore.products.doc(this.product['.key'])
I don't know what the contents of this.product['.key'] is, but it's almost certainly not going to give you the name of a collection and the name of a document together. The only way you can reference a document is through a collection. Documents don't exist outside of collection. That's why the number of path segments in the string you pass to doc() must be even. It should be of the form "collection/document".
You will have to identify the collection you're writing to, and reference the path of the document using it.

Exception from Tracker recompute function

I have a template helper that access a collection in my app., but I have turned off reactivity:
Template.homeBoxGroupsTpl.helpers({
boxes: function () {
return Boxes.find({},
{
sort: {
order: 1
},
reactive: (Session.get("homeCanvasTplReactive") || false)
}
);
}
});
After I insert a new element on my page, that in turn updates the collection, Meteor will throw an error in the browser console:
Error: Exception from Tracker recompute function: reporters.js?1429904535194:67
Error: Error: Bad index in range.getMember: 16
at DOMRange.getMember (http://tidee-vm/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:586:11)
at http://tidee-vm/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2727:45
at Object.Tracker.nonreactive (http://tidee-vm/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:12)
at Object.Blaze.Each.eachView.onViewCreated.eachView.stopHandle.ObserveSequence.observe.changedAt (http://tidee-vm/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2721:17)
at http://tidee-vm/packages/observe-sequence.js?0532a9dd76dd78f543eb4d79a1e429df186d8bde:313:21
at Function._.each._.forEach (http://tidee-vm/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:164:22)
at diffArray (http://tidee-vm/packages/observe-sequence.js?0532a9dd76dd78f543eb4d79a1e429df186d8bde:299:5)
at http://tidee-vm/packages/observe-sequence.js?0532a9dd76dd78f543eb4d79a1e429df186d8bde:147:9
at Object.Tracker.nonreactive (http://tidee-vm/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:12)
at http://tidee-vm/packages/observe-sequence.js?0532a9dd76dd78f543eb4d79a1e429df186d8bde:121:15
Any ideas how to debug this, or is it a Meteor issue?
Meteor's error messages are horrible in all browsers but Chrome, because Meteor expects stack traces to include the error messages, but this is only done by Chrome. I hate to say this, but you'll probably have to use Chrome when debugging a Meteor app. :(
I do not have the solution, but I too encountered the same error, and was able to solve for my case, so posting it, hoping it helps you debug the issue (although this hardly seems to be of any help). The cause was use of .length. I had a large array (name of array: data), and to make it short (decrease length of arrray), I was assigning data.length = 5, which was somehow causing the error, and meteor helper did not work as expected. Removing that line worked for me, and I accomplished shortening of array by a for loop, and storing first five elements in a different variable.
I have faced similar problem too :(
I was able to resolve it by giving unique names to Tempaltes, its corresponding Helpersobject's methods in .js file and Mongo DataBase object(s) names.
Hope it might work for you too :)
For me, I was getting this error from it saying ReactionProduct.selectedVariant() is null on one of Meteor's cycles.
I just handled the null case with:
if (ReactionProduct.selectedVariant() === null) {
return;
}
and it's working out for me.

_getAsyncTracker() returns error: undefined is not a function

I am trying to use the GA tracker object to push external links to GA for tracking. However, I am not sure how to get past this weird error when creating the tracker. From what I can tell, I am doing the same thing that many examples have.
You're getting that error because the function _getAsyncTracker() is not defined yet. The reason it's not defined yet is because your code is running before the ga.js script is finished downloading.
What you need to do is wait until the script has downloaded, and then you can run your code. You can do that by pushing a function onto the _gaq array. Once ga.js is downloaded, it'll execute your function.
_gaq.push(function() {
var tracker = _gaq._getAsyncTracker();
console.log(tracker);
});
Also, beware that the _getAsyncTracker() method is deprecated:
https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApi_gaq#_gaq._getAsyncTracker
Moving the errored line of code out of that script block into another one gets rid of the error. Not sure why though.

Parsing Meteor error: Exception from Deps afterFlush

I get these Deps errors from time to time and I can never figure out what they mean or what they're pointing to:
Exception from Deps afterFlush function function: SyntaxError: Unexpected identifier
at eval (native)
at http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:372:22
at Function.jQuery.extend.globalEval (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:373:7)
at jQuery.ajaxSetup.converters.text script (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9806:11)
at ajaxConvert (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:8873:18)
at done (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9293:15)
at callback (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9753:8)
at Object.send (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9759:7)
at Function.jQuery.extend.ajax (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9244:15)
at Function.jQuery._evalUrl (http://localhost:4000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:9409:16) debug.js:41
It thinks that there is a syntax error, but the only files it points to are jquery.js, which I HIGHLY doubt contain errors...
This error is caused by code in a Template helper somewhere that uses JQuery/a jquery plugin and is running code using eval which contains a syntax error in it, which is why it appears to come from JQuery itself.
There isn't much more than this to go off im afraid. It might be from ajax. Have a look at your chrome's network tab to see what is being downloaded just before this happens and see if it contains any javascript.
If it contains HTML when it should contain javascript check your Meteor paths, Meteor does not throw 404 errors, instead it serves out the main page's html, which may be why the error displays this way instead of a 404
I just came across the similar "afterFlush" error, and while my error was also rooted in a jQuery/plugin with Meteor, it had nothing to do with eval.
The issue circled back around to updating the DOM at the same time I was updating a reactive method, where Meteor was also updating the DOM reactively. I found this out, and removed the manual DOM manipulation, which made this error go away. Hope someone else finds this helpful...

Error handling for ASP based sites and forms

I'm working on a asp based (not .net) site, which spans about 400 odd pages... Now, throughout the site there're ASP and VBScript errors, such as:
Microsoft VBScript runtime error '800a000d'
Type mismatch: 'Cdate'
/MySite/page.asp, line 71
(The above happened when I put in characters into a 'date' field. I know its VBScript in this case, but I get plenty all over.)
Now, I know I can avoid this scenario with client side validation (jQuery for example), but when such things do happen, how do I code up a default 'error' page? You hit the error, and instead of showing you the above, you get redirected to a generic 'error' page?
I've looked up some of this, and found the ASP 'On Error Resume Next' thing, but I haven't found any viable examples. Each one is tailored to a specific error (like dividing 5 by 0), and I really don't want to code up like 400+ potential error messages.
You could create custom error pages, via IIS. I'm not sure what version you're running, etc - but this should give you a good jumping off point. http://support.microsoft.com/kb/224070
You add following code in top in your page.
<% on error resume next%>
.
..
....
(Other code is above instead of point(.))
Then you add
<% if err then
response.redirect("err.page?code="&err.code)
end if%>
And you define error message in your generic error page according to error number.
if you ask same question for client side. You can try and catch code block for possible code clock that will can throw.
For examle
<script language="text/javascript">
try
{
//Code that will can throw error is here.
}
catch(err)
{
document.href.location="genericerrorpage.asp?err=" + err.code;
}
}
</script>

Resources