ReCaptcha & Underscore.js Templates

Question

I am running into an issue in my backbone/underscore application. Our site uses recaptcha and we want to put that content inside a view. We are using underscore for templates. How would i put the recaptcha code inside a template? THe problem is there are scripts tags required for recaptcha and it collides with the underscore script tag. For example it would look something like this:

<script type="text/javascript" id="someTemplate">
<div>
    some html here
</div>
<script type="text/javascript"  src="https://www.google.com/recaptcha/api/challengek=YOUR_PUBLIC_KEY"

  </script>

any help is appreciated. Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Underscore does not prevent you from using script tags, your problems come from your template declaration : you use type="text/javascript" which means your browser tries to interpret your template as Javascript and you get erratic results.

Try

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <script type="text/javascript"  
            src="https://www.google.com/recaptcha/api/challengek=<%= key %>"
    />
</script>

and a demo http://jsfiddle.net/VxjBs/

As you noted in the comments, Recaptcha tries to loads a second script via document.write and fails when inserted in the DOM (see Can't append <script> element for a probable explanation).

Your best bet is probably to go through Recaptcha Ajax API, generate your HTML, identify a node and apply Recaptcha.create on it. Something like

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div class='recaptcha'></div>
</script>

The basis for a view could be

var html = _.template(src, {
    text: 'in div'
});

var $el = $('#render').append(html);
$el.find('.recaptcha').each(function(idx, el) {
    Recaptcha.create(
        pubkey,
        el
    );
});

http://jsfiddle.net/nikoshr/VxjBs/2/

so that code works to not break the script but that script actually loads another script from within using document.write but that document.write is not firing and loading in the appropriate js file. Thoughts? I dont want to post my key for security reasons but you should be able to put a key in and see it in the fiddle — Scoota P, Jun 18 '13 at 16:53

score 0 · Answer 2 · answered Jun 17 '13 at 21:19

Not sure what all the reCAPTCHA script does, but I'm assume it tries to append HTML right after itself. If that's the case then you will probably need to manually attach a script node to the view after you've rendered it and then set the src of the script node to the URL of the external javascript file.

You cannot put script tags inside an underscore template as the browser will only parse the outer-most script tag (your template).

score 0 · Answer 3 · answered Nov 14 '20 at 15:38

The proposed solution is too complicated. This can be achieved very easily as follows (in fact I've just implemented it in my project).

Make sure to include the recaptcha js file in the "head" element of your page as follows:

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

Add this function in your javascript somewhere.

var render_recaptcha = function(target_id) {
    grecaptcha.render(target_id, {
      'sitekey' : RECAPTCHA_SITE_KEY
    });
};

Then, just call this function after you render your template:

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div id='recaptcha'></div>
</script>

//render template like you usually would
//...
//then render the recaptcha
render_recaptcha('recaptcha');

That's it.

ReCaptcha & Underscore.js Templates

3 Answers3