title: Update page with item details on click in Django
body: <p>I am new to ajax and know I need to use this in order to complete what I am trying to do but can't seem to figure it out. </p>
  
  <p>I have a list of companies, and I want to display details about a company on the page when they click on the table row. When the user clicks on a different row, I want the details to change to the details on the new company that was clicked. </p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% block content %}
    &lt;div class='container'&gt;
      &lt;h3&gt;Hello, &lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class='col-md-6'&gt;
      &lt;div class='panel panel-primary'&gt;
        &lt;div class='panel-heading'&gt;
          &lt;h3 class='panel-title'&gt;Call List&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class='panel-body' style="max-height: 70em ;overflow-y: scroll;"&gt;
          &lt;table class="table table-striped table-hover "&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Company Name&lt;/th&gt;
                &lt;th&gt;Other Information&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {% for item in companies %}
                &lt;tr onclick='UpdatePKFunction({{ item.pk }})'&gt;
                  &lt;td&gt;{{ item.CompanyName }}&lt;/td&gt;
                  &lt;td&gt;{{ item.LineOfBusiness }}&lt;/td&gt;
                &lt;/tr&gt;
              {% endfor %}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      function UpdatePKFunction(pk) {
        pk = pk
        $.ajax({
          url: '/updateDetails',
          success: function(pk) {
            $('#DetailView').html(pk);
          }
        });
      };
    &lt;/script&gt;
    &lt;div class='col-md-4'&gt;
      &lt;div class='panel panel-info'&gt;
        &lt;div class='panel-heading'&gt;
          &lt;h3 class='panel-title'&gt;Company Information&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class='panel-body' id='DetailView'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  
  
  <p>What I want to insert:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% for item in companies %}
    {% if item.pk == pk %}
      &lt;td&gt;
        &lt;tr&gt;item.CompanyName&lt;/tr&gt;
      &lt;/td&gt;
    {% endif %}
  {% endfor %}
  </code></pre>
  
  
  
  <p>view.py</p>
  
  <pre class="lang-py prettyprint-override"><code>from django.shortcuts import render
  from django.http import HttpResponse
  
  from mainlist.models import hoovers_companies
  
  # Create your views here.
  def index(request):
      companies = hoovers_companies.objects.all()
      company = hoovers_companies.objects
      return render(request, 'mainlist/index.html', {'companies': companies, 'company': company})
  
  def updateDetails(request):
      companies = hoovers_companies.objects.all()
      return render(request, 'mainlist/updateDetails.html', {'companies': companies, 'pk': 1})
  </code></pre>
  
  
  
  <p>urls.py</p>
  
  <pre class="lang-py prettyprint-override"><code>from django.conf.urls import url
  from . import views
  
  urlpatterns = [
          url(r'^updateDetails', views.updateDetails, name='updateDetails'),
          url(r'^$', views.index, name='index'),
  ]
  </code></pre>
  
  
  
  <p>Any help or pointing in the right direction would be greatly appreciated!</p>