CODEWITHSUNDEEP
jquerypythonhtmlajaxdjango
Matrix166
Matrix166

Reputation: 79

Django dynamic HTML table refresh with AJAX

First of all, I am new with Django, and pretty much completely unfamiliar with AJAX and jQuery. I am developing locally.

So I'm trying to achieve a HTML table, that is dynamically refreshed(without page refresh) every X amount of seconds with help from AJAX, but I can't seem to get my code to work. I've already used the example provided in this question: https://stackoverflow.com/a/34775420/6724882

(If I had enough rep, I would have either replied to that question, or asked help from chat, but I don't have that luxury yet)

I've been trying to get this to work for 10+ hours, and I start to feel helpless. I've been searching the web like crazy, but I'm overwhelmed by all the different ways of doing this, and every question and answer seems to be either too many years old, or just not relevant to my app.

At the moment, the table works correctly for the first query, it displays object Kala with rivinumero = 1 (rownumber in english).

So, I got couple questions.

displaykala.html(with the script in the same file)

{% load static %}
{% include 'loginbar.html' %}
{% include 'nav.html' %}
<html>
    <head>
        <title>Display</title>
        <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}css/style.css">
    </head>
    <body>
            <h1>Display</h1>
            <table id="_appendHere" class="table table-striped table-condensed">
                        <tr>
                          <th>Id</th>
                          <th>Nimi</th>
                          <th>Latnimi</th>
                        </tr>
                        {% for kala in kalat %}
                        <tr>
                          <td>{{kala.rivinro}}</td>
                          <td>{{kala.tuote}}</td>
                          <td>{{kala.latinalainen_nimi}}</td>
                        </tr>
                        {% endfor %}
                      </table>
    </body>
</html>

<script>
    var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% 'get_more_tables.html' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment}
        })
        .done(function(response) {
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 1000)
</script>

get_more_tables.html

{% load static %}
{% for kala in kalat %}
<tr>
   <td>{{ kala.rivinro }}</td>
   <td>{{ kala.tuote }}</td>
   <td>{{ kala.latinalainen_nimi }}</td>
</tr>
{% endfor %}

views.py

from django.shortcuts import render
from adminside.models import Kala
from adminside.models import Liha
from django.contrib.auth.decorators import login_required
# Create your views here.

def index(request):
    return HttpResponse("Index")

@login_required
def displaykala(request):
    kalat = Kala.objects.filter(rivinro=1)
    return render(request, 'displaykala.html', {'kalat': kalat})

@login_required
def get_more_tables(request):
    increment = int(request.GET['increment'])
    increment_to = increment + 10
    kalat = Kala.objects.filter(rivinro=2)[increment:increment_to]
    return render(request, 'get_more_tables.html', {'kalat': kalat})

urls.py (one in app folder)

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^displayk$', views.displaykala, name='displayk'),
    url(r'^get_more_tables', views.get_more_tables, name='get_more_tables'),
]

I'm sorry if there are "Yeah, I tried doing it this way" kind of stupid experiments in the code.

Upvotes: 4

Views: 2938

Answers (1)

Matrix166
Matrix166

Reputation: 79

Thank you so much @DanielRoseman. "Your JS is sending the value as append_increment but the Python is trying to access increment. – "

I changed the line in question to increment = int(request.GET.get('append_increment')) and it fixed the error, and now the table is dynamically updating. Thank you so much for spending your valuable time. Now I can keep building the app!

Upvotes: 1

Related Questions