title: Minimal Example for dynamic HTML pages with Django and AJAX
body: <p>I refer to the following posts:</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/34774138/reload-table-data-in-django-without-refreshing-the-page#">Reload table data in Django without refreshing the page</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/47548863/django-dynamic-html-table-refresh-with-ajax#">Django dynamic HTML table refresh with AJAX</a></p></li>
  </ul>
  
  <p>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.</p>
  
  <p>I have to following code:</p>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>from django.db import models
  
  
  class Question(models.Model):
      question_text = models.CharField(max_length=200)
      pub_date = models.DateTimeField('date published')
  </code></pre>
  
  <p><strong>urls.py</strong></p>
  
  <pre><code>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')
  ]
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;table id="_appendHere"&gt;
  &lt;tr&gt;&lt;td&gt; text &lt;/td&gt;&lt;/tr&gt;
  
  {% for a in questions %}
  &lt;tr&gt;&lt;td&gt;    {{ a.question_text }} &lt;/td&gt;&lt;/tr&gt;
  {% endfor %}
  
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;
  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)
  </code></pre>
  
  <p></p>
  
  <p><strong>get_more_tables.html</strong></p>
  
  <pre><code>{% for a in questions %}
  &lt;tr&gt;&lt;td&gt;    {{ a.question_text }} &lt;/td&gt;&lt;/tr&gt;
  {% endfor %}
  </code></pre>
  
  <p>I have the following issues:</p>
  
  <ul>
  <li>According to <a href="https://stackoverflow.com/questions/26273833/console-error-with-ajax-referenceerror-is-not-defined">Console Error with Ajax: ReferenceError: $ is not defined</a>, 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?</li>
  <li><p>If I run <a href="http://localhost:8000/polls/" rel="nofollow noreferrer">http://localhost:8000/polls/</a>, nothing happens. I was assuming that, when I use </p>
  
  <p>q2 = Question(question_text="What's up4?", pub_date=timezone.now())
  q2.save()</p></li>
  </ul>
  
  <p>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.</p>
  
  <ul>
  <li>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).  </li>
  </ul>