title: Do I have to re-render my page after updating template data
body: <p>First I have <a href="https://stackoverflow.com/questions/13465711/how-do-i-post-with-jquery-ajax-in-django">searched and seen another answer</a>, but it doesn't address my need.</p>
  
  <p>I am trying to POST data using jQuery/AJAX from my HTML to update a list that is also on my HTML.</p>
  
  <p>When I first rendered my template, it had two list-group containers of which the <strong>left container</strong> is pre populated.</p>
  
  <p><a href="https://i.stack.imgur.com/ngSSy.png" rel="nofollow noreferrer">two containers</a></p>
  
  <p>The <strong>choice made</strong> user makes on the left container determines the list group data of the <strong>right container</strong>. </p>
  
  <p>I wanted to send back to the backend Python (server) which selection the user made from the left container, so that I may populate the appropriate list for the second (right) container. This is why I used the POST method using jQuery/AJAX to send users selection. </p>
  
  <p><strong>HTML</strong></p>
  
  <p>Here is a <strong><a href="http://plnkr.co/edit/piQLQQGYZCz2elNRdygO?p=preview" rel="nofollow noreferrer">Plnkr</a></strong> of the HTML</p>
  
  <p>Below is the jQuery/AJAX implementation which <strong>WORKS</strong>. It sends data back to Python <em>(to my views.py)</em>:</p>
  
  <p><strong>JS/jQuery/AJAX:</strong></p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $("#leftContainer &gt; a").click(function(event){
          event.preventDefault();
          $("#leftContainer &gt; a").removeClass("active");
          $(this).addClass("active");
  
          var leftDataSet = parseInt($(this).attr("data-set"));        
          var item_selected = $(this).text();
          var item_index = $(this).attr("id")   //Users selection to send
  
          $.ajax({
              type:'POST',
              url:"home/view_results/onclick/",
              data:{
                  selected_item:item_index,
                  csrfmiddlewaretoken:"{{ csrf_token }}"
              },
              dataType:"text",
              success: function(){$('#message').html("&lt;h3&gt;Data Submitted!&lt;/h3&gt;") }
          })        
      });
  
      $("#rightContainer &gt; a").click(function(event){
          event.preventDefault();
          $(this).toggleClass("active");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>#app/views.py
  from django.shortcuts import render
  class View_Items():
  
     def render_view_items(self, request, shopid):
        item_history = self.get_item_list(shopid)     #Fetches a list
        return render(request, 'view_results/View_items.html',{
             'item_list':item_history,
          })
  </code></pre>
  
  <p><strong>urls.py</strong></p>
  
  <pre><code>#app/urls.py
  from django.urls import path, re_path
  from . import views
  results = views.View_Items()
  urlpatterns=[
          ...
          re_path(r'view_results/(?P&lt;shopid&gt;\w+)$', results.render_view_items, name = 'view_items'),
          re_path(r'view_results/onclick/$', results.render_view_items_again, name = 'view_results_new'),  # NEW
  ]
  </code></pre>
  
  <p><strong>My question is:,</strong> </p>
  
  <p>now that I have the AJAX data returned back to my Python backend at views.py, do I have to re-render my page to populate the Right container's list group items in my HTML? Or is it possible to update the list without having to re-render. If so, why is my proposed re-render function below <strong>NOT</strong> updating the <strong>RIGHT container</strong> of my HTML? Updating the Right container is the objective which required the selection choice of left container.</p>
  
  <p><strong>Addition I made to views.py</strong></p>
  
  <pre><code>#app/views.py
  def render_view_items_again(self, request):
      selected_item_by_user = request.POST.get('selected_item')
      # print(selected_item_by_user)
      models = self.get_all_models(selected_item_by_user)  #Fetches a list.
      # print(models)                     #Tested if my list is populated.
      return render(request, 'view_results/View_items.html',{
          'model_list':models,
          })
  </code></pre>