Контекст 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()

Это прекрасно работает и создает следующую круговую диаграмму: Pie Chart

Однако, когда я пытаюсь передать графики, которые должны меняться в зависимости от выбора, я не получаю никакой ошибки, я просто не могу получить доступ к контексту.

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 - это количество милисекунд, которое вы хотите потратить на перезагрузку страницы после отправки данных.

Вернуться на верх