Skip to content Skip to sidebar Skip to footer
Home / Django / Django Templates / Javascript

Passing Context Variable From Template To Javascript File

Post a Comment
This thread here discussed using variables in inline JavaScript in templates. If I have separate .js files containing scripts, sitting in static folder, such as following: utils.js

Solution 1:

There can be a few ways:

  • Using Input Field

    <inputid="buttonCount" value = "{{buttonCount}}" style="display:none;">

Then read value of element with id= buttonCount in utils.js.

  • Inline Script **Not Suggested,Use Document.onload instead.

    <script>
 set_button_count({{buttonCount}});
 </script>

But this will create a problem when your utils.js is not loaded yet.

  • document.onload Place the script source in <head></head>
<scriptsrc="{% static 'js/utils.js' %}"defer></script><script>document.addEventListener('onload',function(
    {set_button_count({{buttonCount}});
    })
    </script>
  1. set_button_count() is to be placed in utils.js
  2. Defer will ask browser to only fire document load when utils.js is complete and it will be fetched and loaded after the document is loaded.

Warning: Inline scripts are to be used with strict CSP (Content Security Policy).Any inline script can be given a src as nonce. CSP can be done on Server Side on apache or Nginx which are very common web server/reverse proxy or you can also mention the same in HTML if you don't have control on that.

<metahttp-equiv="Content-Security-Policy"content="default-src 'self';
        script-src 'self' 'nonce-{{nonce}}';">

and this nonce can be generated something like this:


    import random,base64
    
    def usersession_processor(request):
        user = request.user
        unbaked_nonce = '%32x' % random.getrandbits(16*8)
        unbaked_nonce = unbaked_nonce.encode('utf-8')
        baked_nonce = base64.b64encode(unbaked_nonce)
        baked_nonce = baked_nonce.decode('utf-8')

Then <script src="{{nonce}}"></script> can be used for safe inlines.

Solution 2:

I don't think this is recommended but you could do something like this if you're using the django template context. Put the script at the bottom of the page and include the buttoncount as a Django Templating Language variable. I don't think it's recommended to mix Django template variables with javascript though.

You can put a new block in your 'base.html' file, at the bottom inside the body tag like this:

{% block inline_javascript %}
{% enblock inline_javascript %}

Then inside the page you want the function to run on you put the script inside the same tags at the bottom of that page outside the 'block content' like:

{% block inline_javascript %}
    <script>constcreateButton = ({{ buttonCount }}) => {
            containerId = "myContainerId"
            container = document.getElementById(containerId)
            for (var i = 0; i < {{ buttonCount }}; i++) {}
                newButton = document.createElement("button")
                newButton.value = "Test"
                newButton.id = "testButton" + i
                container.appendChild(newButton)
            }
        }
    </script>
{% enblock inline_javascript %}

Post a Comment for "Passing Context Variable From Template To Javascript File"