更新页面，其中包含有关单击Django的项目详细信息 [英] Update page with item details on click in Django

问题描述

我对ajax并不陌生，并且知道我需要使用它来完成我想做的事情，但似乎无法弄清楚.

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

我要插入的内容:

{% 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!

推荐答案

我能够找出问题的答案，并希望将其张贴在这里，以防对任何人有帮助.

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

*请注意:请勿对任何敏感或私人信息使用此方法.这是一个简单的 GET 请求，所有信息都可以在URL中看到.

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

然后我将此函数放入模板中. #DetailView 引用了一个空的 div 的ID，我要在其中放置动态内容.这使我可以将所选项目的主键作为URL参数传递给视图.

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>

请参见下面的 urls.py 文件，以及如何捕获该主键(pk)并将其传递给 views.py .从 views.py 移交给模板.

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

执行完此操作后，只需创建一个新模板即可，该模板包含您希望在空的 div 中使用的所有html.我的模板是 mainlist/updateDetails.html

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

这篇关于更新页面，其中包含有关单击Django的项目详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！