Django template Javascript passing a python variable to a javascript one

Question

I did create a python function called generate_random_number that generate a random number between 1 and 9 and compare it to the id of each video in my database and return the url of the video corresponding to the id matching the random number. Here is the function:

from random import randint
from dash_interface.models import Video
from django import template

register = template.Library()


@register.simple_tag
def random_video():
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           return random_url

I want to pass random_url to a javascript variable in a django template.

My template looks like this:

 <video id="videoplayer" controls></video> <script> {% load generate_random_number %} // setup the video element and attach it to the Dash player function setupVideo() { var url = " "; var context = new Dash.di.DashContext(); var player = new MediaPlayer(context); player.startup(); player.attachView(document.querySelector("#videoplayer")); player.attachSource(url); } </script> <style> video { width: 60%; height: 40%; } </style> 

The variable concerned is url .

I did a {% load generate_random_number %} , but I don't know if I can replace the quotation marks in url by {{ random_url }} .

Answer 1

If you want to split the javascript code and html code, you could make something like:

<script arg = {{ somevar }} src = "/path/to/script"></script>

and in the script :

var arg = $("script[src='/path/to/script']").attr("arg");

If you need that the arg will be updated each a concrete period, you need to make an ajax. If you use the database for persist the arg, you could use Django Channels like a more elegance solution.

Answer 2

You should keep the custom template tag definitions in a templatetags folder inside your app. Make sure that __init__.py is present in the templatetags folder. Your folder structure should be similar to:

your_django_app/
    __init__.py
    models.py
    templatetags/
        __init__.py
        template_tags.py
    views.py

And the contents of template_tags.py should be you required tag definition:

from random import randint
from dash_interface.models import Video
from django import template

register = template.Library()  

@register.simple_tag
def random_video():
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           return random_url

Note: The templatetags file should contain the variable named register .

After this you can load the template tags in your HTML. Your code will look like:

<video id="videoplayer" controls></video>
{% load template_tags %}

            <script>
            // setup the video element and attach it to the Dash player
            function setupVideo() {
              var url = "{% random_video %}";
              var context = new Dash.di.DashContext();
              var player = new MediaPlayer(context);
                              player.startup();
                              player.attachView(document.querySelector("#videoplayer"));
                              player.attachSource(url);
            }
            </script>

            <style>
            video {
              width: 60%;
              height: 40%;
            }
            </style>

Answer 3

This is the way I prefer to connect Django templates and JS.

You need to import render function:

views.py file

from django.shortcuts import render
from random import randint
from dash_interface.models import Video

def random_video(request):
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           context = {
               "random_url": random_url
           }
           return render(request, "app/video.html", context)
        else:
           return render(request, "app/video.html", {})    

video.html

<video id="videoplayer" controls></video>

            <script>
                {% load generate_random_number %}
            // setup the video element and attach it to the Dash player
            function setupVideo() {
              // using the context passed in here.
              var url = {{ random_url|safe }}; 
              var context = new Dash.di.DashContext();
              var player = new MediaPlayer(context);
              player.startup();
              player.attachView(document.querySelector("#videoplayer"));
              player.attachSource(url);
            }
        </script>

        <style>
        video {
          width: 60%;
          height: 40%;
        }
        </style>

What I have done is rendered your HTML page in the Django view and passed your variable inside the context dictionary which is later accessible in your HTML tags or script tags.

I also used a |safe parameter in the template tag which removes some unwanted strings.

Cheers and Hope it helps! I have tried this thing in many of my projects and it has always been a success for me.