Refre sh отображаемых данных при клике в приложении Django - PullRequest
0 голосов
/ 07 апреля 2020

Я использую Ajax, чтобы получить соответствующий URL, который отображает заказы на основе даты, которая была нажата в календаре. Это работает, но каждый раз, когда пользователь нажимает на дату, содержимое дублируется, не удаляя предыдущее отображение.

https://i.stack.imgur.com/nEdWg.png

Мне бы хотелось, чтобы содержимое обновилось sh, когда пользователь снова щелкнет по дате. Как бы я это сделал?

Я искал "Jquery refre sh DIV", и наткнулся на методы location.reload (), ajax .reload (), jquery load и подобные решения. Я пытался реализовать их, но не уверен, являются ли они правильным решением для моего случая.

Вот мой код. Пожалуйста, дайте мне знать, если я должен опубликовать что-нибудь еще. Помощь приветствуется.

.js

$(function () {
var $archive = $('#orders-per-day');
$(".day-click").click(function (event) {
event.preventDefault();
var day = $(this)[0].innerText;
var month = $(".month")[0].innerText.substring(0, 3);
var year = $(".month")[0].innerText.substr(-4);
console.log(year);
$.ajax({
  type: 'GET',
  url: `/ocal/date/${year}/${month}/${day}/`,
  success: function (data) {
    $archive.append(data);
    }
  })
 });
});

html template для отображения заказов на один день

{% extends 'ocal/base.html' %}
{% block content %}
<h1>Orders for {{ day }}</h1>
<ul>
  {% if object_list %}
  {% for order in object_list %}
  <li>
    <a href="/ocal/{{ order.id }}/detail">Order {{ order.id }} </a>
    {{ order.status_str }}
  </li>
  {% endfor %}
  {% else %}
  <p>No orders</p>
  {% endif %}
</ul>
{% endblock %}

Код из python файла, где находится класс Календарь где день отформатирован как данные таблицы.

return f"<td><a href='' id='day_{day}' class='day-click' value='{day}'><span class='date'>{day}</span><ul>{d}</ul></a></td>"

1 Ответ

0 голосов
/ 07 апреля 2020

$archive.append(data) добавляет , как говорит функция.

Вы должны использовать заполнитель <div>, для которого вы хотите заменить содержимое. $archive.html(data) сделает это, за исключением того, что я не уверен, $archive является правильным div в этом случае. Но вы поняли.

...