Django 1.10 - Use django.shortcuts.render to generate a webpage with variables which includes a javascript as parameter
<p>I'm new to Django, trying to migrate a website that I have built to a Django application.
I have generated an HTML template on which I want to present dynamic content based on the URL that was requested. 
The HTML template looks like this:</p>

<pre><code>{% load staticfiles%}

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;script type="text/javascript"&gt;
    {{ script }}
    &lt;/script&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="{% static 'styles.css' %}"/&gt;
    &lt;title&gt;{{ title }}&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
    &lt;h1&gt;{{ title }}&lt;/h1&gt;
&lt;/header&gt;    
&lt;section&gt;
    &lt;p&gt;
        {{ date }}&lt;br/&gt;&lt;br/&gt;
        SiteID: {{ site }}
        &lt;br/&gt;
        -----------------
    &lt;/p&gt;
&lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>On my views.py file, I'm generating the URL using this method (for example):</p>

<pre><code>def site(request):
    return render(request, "sites/site.html", {'date': strftime("%A, %B %d %Y"),
                                               'site': '123456',
                                               'title': 'Test',
                                               'script': "window.lpTag=window.lpTag||{};if(typeof window.lpTag._tagCount==='undefined'){window.lpTag={site:'123456'||'',section:lpTag.section||'',autoStart:lpTag.autoStart===false?false:true,ovr:lpTag.ovr||{},_v:'1.6.0',_tagCount:1,protocol:'https:',events:{bind:function(app,ev,fn){lpTag.defer(function(){lpTag.events.bind(app,ev,fn);},0);},trigger:function(app,ev,json){lpTag.defer(function(){lpTag.events.trigger(app,ev,json);},1);}},defer:function(fn,fnType){if(fnType==0){this._defB=this._defB||[];this._defB.push(fn);}else if(fnType==1){this._defT=this._defT||[];this._defT.push(fn);}else{this._defL=this._defL||[];this._defL.push(fn);}},load:function(src,chr,id){var t=this;setTimeout(function(){t._load(src,chr,id);},0);},_load:function(src,chr,id){var url=src;if(!src){url=this.protocol+'//'+((this.ovr&amp;&amp;this.ovr.domain)?this.ovr.domain:'lptag.liveperson.net')+'/tag/tag.js?site='+this.site;}var s=document.createElement('script');s.setAttribute('charset',chr?chr:'UTF-8');if(id){s.setAttribute('id',id);}s.setAttribute('src',url);document.getElementsByTagName('head').item(0).appendChild(s);},init:function(){this._timing=this._timing||{};this._timing.start=(new Date()).getTime();var that=this;if(window.attachEvent){window.attachEvent('onload',function(){that._domReady('domReady');});}else{window.addEventListener('DOMContentLoaded',function(){that._domReady('contReady');},false);window.addEventListener('load',function(){that._domReady('domReady');},false);}if(typeof(window._lptStop)=='undefined'){this.load();}},start:function(){this.autoStart=true;},_domReady:function(n){if(!this.isDom){this.isDom=true;this.events.trigger('LPT','DOM_READY',{t:n});}this._timing[n]=(new Date()).getTime();},vars:lpTag.vars||[],dbs:lpTag.dbs||[],ctn:lpTag.ctn||[],sdes:lpTag.sdes||[],ev:lpTag.ev||[]};lpTag.init();}else{window.lpTag._tagCount+=1;}"})
</code></pre>

<p>The problem is, that this method actually renders all my strings so that it's escaping characters such as apostrophe ('), which is causing the JavaScript not to work. That's what I see in the browser console when running the page:</p>

<pre><code>&lt;script type="text/javascript"&gt;
window.lpTag=window.lpTag||{};if(typeof window.lpTag._tagCount===&amp;amp;#39;undefined&amp;#39;){window.lpTag={site:&amp;#39;123456&amp;#39;||&amp;#39;&amp;#39;,section:lpTag.section||&amp;#39;&amp;#39;,autoStart:lpTag.autoStart===false?false:true,ovr:lpTag.ovr||{},_v:&amp;#39;1.6.0&amp;#39;,_tagCount:1,protocol:&amp;#39;https:&amp;#39;,events:{bind:function(app,ev,fn){lpTag.defer(function(){lpTag.events.bind(app,ev,fn);},0);},trigger:function(app,ev,json){lpTag.defer(function(){lpTag.events.trigger(app,ev,json);},1);}},defer:function(fn,fnType){if(fnType==0){this._defB=this._defB||[];this._defB.push(fn);}else if(fnType==1){this._defT=this._defT||[];this._defT.push(fn);}else{this._defL=this._defL||[];this._defL.push(fn);}},load:function(src,chr,id){var t=this;setTimeout(function(){t._load(src,chr,id);},0);},_load:function(src,chr,id){var url=src;if(!src){url=this.protocol+&amp;#39;//&amp;#39;+((this.ovr&amp;amp;&amp;amp;this.ovr.domain)?this.ovr.domain:&amp;#39;lptag.liveperson.net&amp;#39;)+&amp;#39;/tag/tag.js?site=&amp;#39;+this.site;}var s=document.createElement(&amp;#39;script&amp;#39;);s.setAttribute(&amp;#39;charset&amp;#39;,chr?chr:&amp;#39;UTF-8&amp;#39;);if(id){s.setAttribute(&amp;#39;id&amp;#39;,id);}s.setAttribute(&amp;#39;src&amp;#39;,url);document.getElementsByTagName(&amp;#39;head&amp;#39;).item(0).appendChild(s);},init:function(){this._timing=this._timing||{};this._timing.start=(new Date()).getTime();var that=this;if(window.attachEvent){window.attachEvent(&amp;#39;onload&amp;#39;,function(){that._domReady(&amp;#39;domReady&amp;#39;);});}else{window.addEventListener(&amp;#39;DOMContentLoaded&amp;#39;,function(){that._domReady(&amp;#39;contReady&amp;#39;);},false);window.addEventListener(&amp;#39;load&amp;#39;,function(){that._domReady(&amp;#39;domReady&amp;#39;);},false);}if(typeof(window._lptStop)==&amp;#39;undefined&amp;#39;){this.load();}},start:function(){this.autoStart=true;},_domReady:function(n){if(!this.isDom){this.isDom=true;this.events.trigger(&amp;#39;LPT&amp;#39;,&amp;#39;DOM_READY&amp;#39;,{t:n});}this._timing[n]=(new Date()).getTime();},vars:lpTag.vars||[],dbs:lpTag.dbs||[],ctn:lpTag.ctn||[],sdes:lpTag.sdes||[],ev:lpTag.ev||[]};lpTag.init();}else{window.lpTag._tagCount+=1;}
&lt;/script&gt;
</code></pre>

<p>So my question is - How can I generate a dynamic page that is getting the actual JavaScript code as a variable without rendering the code? (Bear in mind that there are also simple texts that I'm transferring, such as the title of the page, so I will need to render the page anyway).</p>

<p>Thanks!</p>

<p>You should put that script in a separate file and then pass the file name to the template instead. </p>

<p>Put your script in a js file, say <code>my_script.js</code>:</p>

<pre><code>window.lpTag=window.lpTag||{};if(typeof window.lpTag._tagCount==='undefined') ...
</code></pre>

<p>Then in your view:</p>

<pre><code>def site(request):
    return render(request, "sites/site.html", {'date': strftime("%A, %B %d %Y"),
                                               'site': '123456',
                                               'title': 'Test',
                                               'script': 'my_script.js'})
</code></pre>

<p>Then in your HTML:</p>

<pre><code>&lt;head&gt;
    &lt;script type="text/javascript" src="{{ script }}"&gt;&lt;/script&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="{% static 'styles.css' %}"/&gt;
    &lt;title&gt;{{ title }}&lt;/title&gt;
&lt;/head&gt;
</code></pre>

javascript python html django