I'm adding the Google Recaptcha v2 problematically to a backbone view like so:
// this is the callback function
var getRecaptchaResponse = function (response) {
if (response) {
thisView.captchaResponse = response;
thisView.canShowContinue();
} else {
alert("Captcha response was incorrect");
}
};
// render the recaptcha
var renderCaptcha = function () {
thisView.captchaWidgetId = grecaptcha.render('recaptcha-container', {
sitekey: GlobalSettings.recaptchaKey,
callback: getRecaptchaResponse,
size: 'compact'
});
};
// map the internal function to the window
// so that the callback registered in the
// link below can be called by JSONP.
window.renderCaptcha = renderCaptcha;
// load the script
$.getScript('https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit', function () { });
Once the Captcha is solved successfully I want to remove it from the UI, so I'm simply removing the div container:
// if the user has solved the captcha yet, don't continue
if (!thisView.captchaResponse) {
return;
}
// remove recpatcha
$('#recaptcha-container').remove();
There doesn't seem to be a API method that Google have offered to destroy the grecaptcha widget properly though. Is this a problem? What's the recommended way of doing this?
The above removal of the container works in Chrome, but not in IE11. In IE11 the captcha challenge remains visible.