Update page with item details on click in Django

问题

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.

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.

HTML:

{% block content %}
  <div class='container'>
    <h3>Hello, </h3>
  </div>
  <div class='col-md-6'>
    <div class='panel panel-primary'>
      <div class='panel-heading'>
        <h3 class='panel-title'>Call List</h3>
      </div>
      <div class='panel-body' style="max-height: 70em ;overflow-y: scroll;">
        <table class="table table-striped table-hover ">
          <thead>
            <tr>
              <th>Company Name</th>
              <th>Other Information</th>
            </tr>
          </thead>
          <tbody>
            {% for item in companies %}
              <tr onclick='UpdatePKFunction({{ item.pk }})'>
                <td>{{ item.CompanyName }}</td>
                <td>{{ item.LineOfBusiness }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script>
    function UpdatePKFunction(pk) {
      pk = pk
      $.ajax({
        url: '/updateDetails',
        success: function(pk) {
          $('#DetailView').html(pk);
        }
      });
    };
  </script>
  <div class='col-md-4'>
    <div class='panel panel-info'>
      <div class='panel-heading'>
        <h3 class='panel-title'>Company Information</h3>
      </div>
      <div class='panel-body' id='DetailView'>
      </div>
    </div>
  </div>
{% endblock %}

What I want to insert:

{% for item in companies %}
  {% if item.pk == pk %}
    <td>
      <tr>item.CompanyName</tr>
    </td>
  {% endif %}
{% endfor %}

view.py

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})

urls.py

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

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

Any help or pointing in the right direction would be greatly appreciated!

回答1:

I was able to figure out the answer to my question and wanted to post it here in case it is helpful to anyone.

*Please note: DO NOT USE THIS METHOD WITH ANY SENSITIVE OR PRIVATE INFORMATION. It is a simple GET request and all information can be seen in the URL.

First, in the template I want to display the information in, I passed the clicked item's primary key to my function.

<ELEMENT onclick='UpdatePKFunction({{ item.pk }})'>

Then I put this function inside my template. The #DetailView references the id of an empty div where I want to put the dynamic content. This allows me to pass the primary key of the selected item to the view as a URL parameter.

<script>
  function UpdatePKFunction(pk) {
    pk = pk
    $.ajax({
      url: 'updateDetails/' + pk,
      success: function(data) {
        $('#DetailView').html(data);
      }
    });
  };
</script>

See the urls.py file below and how it captures that primary key (pk) and passes it on to the views.py. From the views.py it is handed off to the template.

# urls.py

urlpatterns = [
url(r'^updateDetails/(?P<pk>.+?)/$', views.updateDetails, name='updateDetails'),
url(r'^$', views.index, name='index'),
]


# views.py

def updateDetails(request, pk):
    company = companies.objects.get(pk=pk)
    return render(request, 'mainlist/updateDetails.html', {'company': company, 'pk': pk})

Once you do this, just create a new template that contains whatever html you want inside the empty div you started with. My template here is mainlist/updateDetails.html

来源：https://stackoverflow.com/questions/42771828/update-page-with-item-details-on-click-in-django

标签

javascript

jquery

python

ajax

django