Dynamic variable value on HTML with Django

Question

I'm looking to display a constantly-changing python variable (that's read from a websocket server) onto a HTML file, currently i'm using a Django tag as it follows:

templatetags/mytag.py

from django import template
register = template.Library()
current_value = 0

@register.filter
def c_value(placeholder):
    return current_value

#more code that modifies current_value reading from a websocket server

index.html

{% load mytag %}
<script>
function mytimer() {
  setInterval(function(){ 
                $('#stuff').html( {{ placeholder|c_value }} ); 
              }
              , 1000);
}
mytimer();
</script>

#some code from the website

<span id="stuff">Holder</span>

However naturally '{{ placeholder|c_value }}' only outputs the first ever value of 'current_value', which is 0 in this case, and so the source code of index.html ends up being:

source code after '{{ placeholder|c_value }}'

<script>
function mytimer() {
  setInterval(function(){ 
                $('#stuff').html( 0 ); 
              }
              , 1000);
}
mytimer();
</script>

Which is not desired since we would like to print the changing-value of 'current_value' each second.

What is the normal approach for these kind of dynamic texts? Many thanks!

wolfson · Accepted Answer · 2018-03-07 05:06:50Z

1

There are a few things you'll need to do to accomplish this behavior.

Set up a URL that returns the value you're interested in. For instance, set up your website so that the URL http://example.com/c_value returns a response with the correct information. It's usually a good idea to return the response in a JSON format; in Django, you can use the JsonResponse class to do this. Suppose you return the text:
```
{
    "c_value": "foo"
}
```
Change your page so that instead of loading in a variable from a template, it makes a request to the address that you set up. If you're using jQuery, you can use the $.ajax function to do this (or $.getJSON, which is just a shorthand function for $.ajax with only JSON data). You'll probably end up with something like this inside of your timer, assuming that the JSON returned matches the example I gave in step 1. (data will contain the JSON object that you sent from the server).
```
$.ajax({
    dataType: "json",
    url: "http://example.com/c_value",
    success: function(data) {
        $('#stuff').html(data["c_value"]);
    }
});
```

edited Mar 7, 2018 at 5:06

answered Mar 7, 2018 at 3:05

wolfson

1928 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juan Ignacio Suarez Over a year ago

This solved it, many thanks! Seems pretty basic now but i didn't know about AJAX at all, it all kind of makes sense now. For the record: 1. I created a view for '/c_value' so that it 'my_site/c_value' answered a JSON with the relevant data from the server 2. Installed jQuery and then used AJAX to get the previously said relevant info from '/c_value' 3. Insterted this AJAX module into the function from the timer i specified before with setInterval Thanks again!

wolfson Over a year ago

Glad it worked for you! Keep in mind that you don't have to use jQuery to make an AJAX request -- it just reduces the amount of code to write.

Collectives™ on Stack Overflow

Dynamic variable value on HTML with Django

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related