title: How to refresh part of a Django page with AJAX?
body: <p>I am deploying a website using Django. There is an application called 'forum', supporting a discussion forum on my website. </p>
  
  <p>The url of the discussion forum is 'XXX.com/forum/roomY'. I want to refresh a div id = ''chat'', which includes a message list, on this page when users click a refresh button. I want to use AJAX to do that. </p>
  
  <p>But I find that I could not call the function updatestatementlist(request) to retrieve the updated message list so it can be passed to the  on this page.</p>
  
  <p><strong>/forum/views.py def updatestatementlist(request):</strong></p>
  
  <pre><code>log.debug("call statementlist function")
  statements = Statement.objects.filter(discussion=discussion)
  return render(request, 'forum/statementlist.html', {
      'statements': statements
      })
  </code></pre>
  
  <p>I cannot see the log info so I think by clicking the button I fail to call this function.</p>
  
  <p>The main html page of the discussion forum is <strong>/forum/discussion.html</strong>, which is under the template folder. I extract the html code within the div id = "chat" to a separate html <strong>/forum/statementlist.html</strong> as suggested <a href="https://stackoverflow.com/questions/3583534/refresh-div-element-generated-by-a-django-template">here</a> and several other SO posts. </p>
  
  <p><strong>/forum/discussion.html</strong></p>
  
  <pre><code>&lt;button id = "Refresh"&gt; Refresh &lt;/button&gt;
  &lt;div id="chat"&gt;
  {% include 'forum/statementlist.html' %}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>/forum/statementlist.html</strong></p>
  
  <pre><code>{% load mptt_tags %}
  {% recursetree statements %}
      // display each statement
  {% endrecursetree %}
  </code></pre>
  
  <p><strong>forum.js</strong></p>
  
  <pre><code>//When users click the refresh button
      $("#Refresh").on("click", function(event){
      alert("Refresh clicked")
      $.ajax({
          url: '',
          type: "GET",
          success: function(data) {
              alert("success")
              var html = $(data).filter('#chat').html();
              $('#chat').html(html);
          }
      });
  });
  </code></pre>
  
  <p>I also tried a few other url in this AJAX request: {% url updatestatementlist %}, {% url 'updatestatementlist' %}. But then I think it should be set to empty because I don't want to be redirected to another url. The discussion forum has a url of 'XXX.com/forum/roomY', by clicking the refresh button on this page I only want to refresh the div and fetch an updated statement list from the server.</p>
  
  <p>BTW, I can see the two alerts after I click the button.</p>
  
  <p><strong>/forum/urls.py</strong></p>
  
  <pre><code>urlpatterns = [
  ...
  url(r'^(?P&lt;label&gt;[\w-]{,50})/$', views.discussion_forum, name='discussion_forum'),
  url(r'^(?P&lt;label&gt;[\w-]{,50})/$', views.statementlist, name='statementlist'),
  </code></pre>
  
  <p>]</p>
  
  <p>/forum/views.py def discussion_forum() is used to load all the information when the user first arrives at this forum.</p>
  
  <p>I guess my problem might be that 1) the AJAX is wrong; 2) the url is wrong so that the updatestatementlist() can not be called. </p>
  
  <p>Can anyone help me with that? Thanks a lot! Let me know if you need any other information!</p>
  
  <p>Packages related:</p>
  
  <p>Django==1.9.3</p>
  
  <p>django-mptt==0.8.7</p>