Dynamically updating Django template with new data

Question

I am creating a cricket website which shows the live scores of cricket matches using Django. I want my template to update its content in (section id='main-content') dynamically after some timeout and I don't know how to implement it.

Here is my code:

views.py

def livescores():
    # generates livescores and returns a dict containing live scores
    return scores

def display_scores(request):
    # calls the livescores function and gets the dict and 
    #passes it to django template for rendering purposes
    scores = livescores()
    return render(request, 'LiveScores/display_scores.html', scores)

template

<html>
    <head>
        <title>{{MatchName}}</title>
        {% load static %}
        ...
    </head>
    <body>
        <header>
          ...
        </header>
        <section class="container" id="main-content">
            <div class="row">
                <div class="col-sm-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">{{Team1}}</h5>
                      <p class="card-text">{{RunRate}}</p>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                    <div class="card">
                      <div class="card-body">
                        <h5 class="card-title">{{result}}</h5>
                        <p class="card-text">{{situation}}</p>
                      </div>
                    </div>
                  </div>
                <div class="col-sm-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">{{Team2}}</h5>
                      <p class="card-text">* LIVE</p>
                    </div>
                  </div>
                </div>
            </div>
        </section>
    </body>
</html>

I have followed some answers on SO regarding the use of Ajax for the purpose but it did me no help: some answers caused the navbar to duplicate when the content was updated and others just populated the tag with unnecessary things like 'Bootstrap CDN links'.

Waldemar Podsiadło · Accepted Answer

If you don't want to go into ajax/js (at some point in future you will need too) I can recommend use htmx (htmx.org)

So change your view to:

def livescores(request=None):
    # generates livescores and returns a dict containing live scores
    if request is None:
        return scores
    else:
        return render(request, 'livescores/components/livescores.html', scores)

In livescores/components/livescores.html template:

  <div class="row">
            <div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{{Team1}}</h5>
                  <p class="card-text">{{RunRate}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">{{result}}</h5>
                    <p class="card-text">{{situation}}</p>
                  </div>
                </div>
              </div>
            <div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{{Team2}}</h5>
                  <p class="card-text">* LIVE</p>
                </div>
              </div>
            </div>
        </div>

so here is nothing changing in your code.

Add urlpattern for livescores in yours urls.py

in livesocres.html main template change:

 <section class="container" id="main-content">

to:

 <section class="container" id="main-content" hx-get="/url/to/livescores" hx-trigger="every 5s">

and add:

  <script src="https://unpkg.com/[email protected]"></script>

Rumeee · Answer

u need rest api that return json

from django.http import HttpResponse

def get_ajax_data(request):     
    scores=livescores()   
    return HttpResponse(json.dumps(scores), content_type='application/json')

and in your ajax call. here im using jquery

         var team1=$(`<div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{Team1}</h5>
                  <p class="card-text">{RunRate}</p>
                </div>
              </div>
            </div>`)
          var desk=$(`<div class="col-sm-4">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">{result}</h5>
                    <p class="card-text">{situation}</p>
                  </div>
                </div>
              </div>`)
           var team2=$(`<div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{Team2}</h5>
                  <p class="card-text">* LIVE</p>
                </div>
              </div>
            </div>`)
$(function(){
  setInterval(function(){
     $.ajax({
          method: "GET",
          url: "{% url 'ajax_data' %}",
          data: {data: your_additional_data_to_send}
        }).done(function( score) {
       
       
       $(team1).find(".card-title").text(score.team1)
       $(team1).find(".card-text").text(score.runrate)
       $(desk).find(".card-title").text(score.result)
       $(desk).find(".card-text").text(score.situation)
       $(team2).find(".card-title").text(score.team2)
      
       $("#main-content").html(team1)           
       $("#main-content").append(desk)
       $("#main-content").append(team2)
      });
   },4000)


})

Dynamically updating Django template with new data

Tags:

javascript

ajax

django

django-templates

Pythonista

2 Answers

Waldemar Podsiadło

Rumeee

Recent Activity

Donate For Us

Dynamically updating Django template with new data

Tags:

javascript

ajax

django

django-templates

Pythonista

2 Answers

Waldemar Podsiadło

Rumeee

Related questions

Recent Activity

Donate For Us