Myujth

I want to dynamically load Google's reCaptcha on my Backbone View only when on that view and only add the script once.

I managed to find this really helpful answer here: https://stackoverflow.com/a/34533362/3847393 which adds the script to the view when I render the view. However, every time I navigate away from this view and back to it, it adds the script to the header again. As the reCaptcha is on a lot of pages on my site, this could quickly add a lot of repeated scripts to the code head.

I have tried to check and see if the script has already been added to the DOM first before adding the script, which works. However, when navigating away from the page and back again, the reCaptcha doesn't render.

loadCaptcha: function loadCaptcha(siteKey) 
 var self = this;

 window.renderCaptcha = function() 
 self.captchaWidgetId = grecaptcha.render('contactus-form-recaptcha', 
 sitekey: siteKey
 );
 ;

 var scripts = $('#recaptcha-api-script');

 if (!scripts.length) 
 $('head:first').append('<script id="recaptcha-api-script" type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit"></script>');
 

I also tried updating my scripts length check at the end and adding an else to try re-rendering the reCaptcha:

if (!scripts.length) 
 $('head:first').append('<script id="recaptcha-api-script" type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit"></script>');
 else 
 window.renderCaptcha();

But this throws an reCaptcha error saying that the placeholder element/id is missing.

Much appreciate any help or direction.