Question

I want to integrate tweet button inside a jquery template. Am trying the ‘tweet button with javascript’ (link). But my html template shows only link, it does not show the button. I tried the anchor tag outside the jquery-templ script. Then it is working fine. I am confused why this is not working inside jquery-tmpl.

code look like follows:

<script type="text/x-jquery-tmpl">

<a href="https://twitter.com/share" class="twitter-share-button" data-via="twitterapi"   data-lang="en">Tweet</a>   

</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Any suggestions?

Answer 1

Because the closing </script> tag is not parsed correctly by the browser.

You could write </scr{{= ""}}ipt> instead…

The point is, that browsers don’t understand nesting of <script> tags, so whenever it parses a </script>, it closes the outermost script tag. Therefore, the closing </script> tag is matched to the template script.

You can trick the browser into ignoring the script tag, by adding the {{= ""}}, which will be used by the template engine to generate an empty string. </scr{{= ""}}ipt> will result in </script>, after templating.