Minimal Example for dynamic HTML pages with Django and AJAX

Question

I refer to the following posts:

Despite the two post and nice answers, I am still struggling to construct a minimal working example for dynamic HTML pages resorting to Django and AJAX.

I have to following code:

models.py

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

urls.py

from django.conf.urls import url
from . import views

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

views.py

from django.shortcuts import render
from .models import Question

def index(request):
    a = Question.objects.order_by('-pub_date')
    context = {'questions': a}
    return render(request, 'polls/index.html', context)

def get_more_tables(request):
    a = Question.objects.order_by('-pub_date')
    context = {'questions': a}
    return render(request, 'polls/get_more_tables.html', context)

index.html

<html>
<body>

<table id="_appendHere">
<tr><td> text </td></tr>

{% for a in questions %}
<tr><td>    {{ a.question_text }} </td></tr>
{% endfor %}

</table>
</body>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
var append_increment = 0;
setInterval(function() {
    $.ajax({
        type: "GET",
        url: "{% url 'get_more_tables' %}",
        data: {'append_increment': append_increment}
    })
    .done(function(response) {
        $('#_appendHere').append(response);
        append_increment += 10;
    });
}, 1000)

get_more_tables.html

{% for a in questions %}
<tr><td>    {{ a.question_text }} </td></tr>
{% endfor %}

I have the following issues:

According to Console Error with Ajax: ReferenceError: $ is not defined, I need to set up the js.file in the js-script. If I do not do that, I get the "ReferenceError: $ is not defined" error. Why is that, in particular, as this is not necessary for the previous above mention posts?
If I run http://localhost:8000/polls/, nothing happens. I was assuming that, when I use

q2 = Question(question_text="What's up4?", pub_date=timezone.now()) q2.save()

by python manage.py shell, the entire internal database should be shown. However, nothing is happening. When I refresh the site by hand, all entries are shown.

The inspector console of Mozilla does not show any entry. The network console of Mozilla does show that /pools and the external js file is accessed. However, no continuous access in 1s intervals is shown (not sure if that should be the case).

score 1 · Accepted Answer · answered Oct 19 '18 at 20:41

Your HTML is not valid, for a couple of reasons.

First, you put the script block outside the closing </html> tag. That means it's outside the document itself, and may not be read by the browser.

More importantly, you haven't got your code inside a proper script element. You have an opening tag, but you use that to reference the external jQuery library via the src attribute. You don't have a closing tag at all

You need to put the jQuery reference in its own element, and use proper opening and closing tags for your own script.

<html>
<body>
<table>
...
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var append_increment = 0;
setInterval(function() {
    $.ajax({
        type: "GET",
        url: "{% url 'get_more_tables' %}",
        data: {'append_increment': append_increment}
    })
    .done(function(response) {
        $('#_appendHere').append(response);
        append_increment += 10;
    });
}, 1000)
</script>
</body>
</html>

score -1 · Answer 2 · answered Oct 19 '18 at 20:22

You have to externalyze your jquery in another file (without any tags, just the jquery). And add a ready function:

$(document).ready(function(){
    // Your JS code here
});

In the html, do as follow:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="<relative_path_to_your_js>">

The route /polls/ doesn't exist. So nothing happens. You only have routes / and /get_more_tables defined.

I did not understand the last question, what do you enter in the Interactive Console ? (After entering ./manage.py shell)

Minimal Example for dynamic HTML pages with Django and AJAX

2 Answers2