Контекст Django не загружает новые элементы после POST
У меня есть представление в Django, которое показывает статистику различных элементов в приложении. Пользователи могут фильтровать статистику, которую они хотят видеть, на основе выбора. В настоящее время я использую JavaScript для обновления значений на основе контекста, переданного в представление. Когда выбор меняется, я хочу передать новые данные в Django через POST запрос и создать круговую диаграмму, сохранить ее как изображение и передать обратно в представление.
В настоящее время я делаю это до загрузки шаблона, но когда я пытаюсь передать изображение в контекст после POST, я ничего не получаю.
Схемы в view.html
cmp_counts = []
cmp_counts.append(len(Campaign.objects.filter(reviewComplete=False)))
cmp_counts.append(len(Campaign.objects.filter(reviewComplete=True)))
cmp_counts.append(len(Campaign.objects.filter(closed=True)))
labels = ["Open", "Completed", "Closed"]
for count in cmp_counts:
if count == 0:
index = cmp_counts.index(count)
labels.remove(labels[index])
cmp_counts.remove(count)
print(cmp_counts)
def auto(values):
a = np.round(values/100*sum(cmp_counts), 0)
plt.pie(cmp_counts, labels=labels, textprops={'color':"w"}, autopct=lambda x: '{:.0f}'.format(x*sum(cmp_counts)/100))
plt.title('All Campaigns', color="w")
tmpFile = BytesIO()
plt.savefig(tmpFile, transparent=True, format='png')
encoded = base64.b64encode(tmpFile.getvalue()).decode('utf-8')
html = '<img class="report-graphs" src=\'data:image/png;base64,{}\'>'.format(encoded)
context['pie_chart'] = html
plt.clf()
Это прекрасно работает и создает следующую круговую диаграмму:
Однако, когда я пытаюсь передать графики, которые должны меняться в зависимости от выбора, я не получаю никакой ошибки, я просто не могу получить доступ к контексту.
HTML скрипт
<script>
function update() {
dict = {}
stats = {}
filter_stats = {}
stats['comp'] = document.getElementById('comp_count').innerHTML.replace(/[^0-9]/g,'');
stats['inc'] = document.getElementById('inc_count').innerHTML.replace(/[^0-9]/g,'');
stats['appr_accts'] = document.getElementById('appr_count').innerHTML.replace(/[^0-9]/g,'');
stats['den_accts'] = document.getElementById('den_count').innerHTML.replace(/[^0-9]/g,'');
stats['inc_accts'] = document.getElementById('incRev_count').innerHTML.replace(/[^0-9]/g,'');
filter_stats['comp'] = document.getElementById('filter_comp_count').innerHTML.replace(/[^0-9]/g,'');
filter_stats['inc'] = document.getElementById('filter_inc_count').innerHTML.replace(/[^0-9]/g,'');
filter_stats['appr_accts'] = document.getElementById('filter_appr_count').innerHTML.replace(/[^0-9]/g,'');
filter_stats['den_accts'] = document.getElementById('filter_den_count').innerHTML.replace(/[^0-9]/g,'');
filter_stats['inc_accts'] = document.getElementById('filter_incRev_count').innerHTML.replace(/[^0-9]/g,'');
dict['stats'] = stats
dict['filter_stats'] = filter_stats
$.ajax({
url: '/reports/',
type: 'POST',
headers: {'X-CSRFtoken': '{{ csrf_token }}'},
data: dict,
dataType: 'json'
})
}
</script>
Эта функция вызывается при загрузке документа и должна отправить данные обратно в Django для формирования новых графиков
Я знаю, что это работает и изображения созданы, потому что "print(context)" в представлении показывает все изображения (я усекла кодированные строковые значения):
{'parent_template': 'AccessReview/adminbase.html', 'pie_chart': '<img class="report-graphs" src=\'data:image/png;base64,iVBO.....'>', 'bar_chart': '<img class="report-graphs" src=\'data:image/png;base64,iVBO....\'>', 'campaigns': <QuerySet [<Campaign: 1 2022-10-30>, <Campaign: 2 2022-12-31>, <Campaign: 3 2023-03-31>, <Campaign: 17 2022-11-30>, <Campaign: 18 2022-12-31>, <Campaign: 19 2022-09-13>]>, 'systems': <QuerySet [<System: ISE>]>, 'stats_revs': '<img class="report-graphs" src=\'data:image/png;base64,iVBO....'>', 'stats_accts': '<img class="report-graphs" src=\'data:image/png;base64,iVBO....'>', 'filter_revs': '<img class="report-graphs" src=\'data:image/png;base64,iVBO....'>', 'filter_accts': '<img class="report-graphs" src=\'data:image/png;base64,iVBO....'>'}
Но когда я пытаюсь показать эти изображения с помощью {{stats_revs|safe}}
, ничего не отображается. Я также вывел контекстные переменные в шаблоне, и они не заполняются из POST-запроса. Я в растерянности и хочу знать, как я могу генерировать эти графики на основе текущего выбора фильтра конечным пользователем.
Я вижу, что вы используете AJAX для отправки POST-данных. Ajax отправляет данные в представление, но не создает новую страницу. На бэкенде данные изменяются, но без обновления вы не сможете их увидеть. Если вы не против обновления страницы в вашем методе javascript, вы можете сделать следующее:
setTimeout(function(){
window.location.reload();
}, 500);
500 - это количество милисекунд, которое вы хотите потратить на перезагрузку страницы после отправки данных.