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.
- Should I include the script in its own separate file, and not in the HTML file (in my case, displaykala.html). If so, should that file be in the static/js folder, or somewhere else?
- Do I need to include AJAX/JS somewhere separately, in order for the script to work?
- Am I clearly doing something wrong, or is the answer in the question I provided wrong?
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.
