Я использую 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>"