Python Flask jinja2 включает страницу

Question

У меня проблема с включением в jinja с использованием Flask: у меня есть страница списка с кнопками действий, такими как:

черныйКнопка имеет href и переключает div (показать / скрыть), используя JQuery страницу графика в разделе div (см. ниже)

...
...
...

<a href="/cycle/graph/{{account.id}}/{{account.aid}}/{{c.id}}" class="btn btn-dark btn-circle"
                           data-toggle="tooltip" title="Graph" id="sh_chart"><i class="fas fa-chart-line"></i></a>



...
...
...
<div id="chart" style="display:none">
    {% include "/cycle/chart.html" %}
</div>
{% endblock %}

, а вот мой JQuery:

$("#account_detail").on("click", "#sh_chart", function() {
        $("#chart").toggle();

        var current_row = $(this).closest('tr')
        var cid = current_row.find('td:eq(0)').text();
        $("p#chart_cid").text(cid);

        $("#chart").load('/cycle/chart');
    });

При нажатииЯ получил страницу с диаграммой на новой странице, это проблема.У вас есть идеи, как включить этот график на той же странице?

Спасибо

конечная точка:

@bpGraph.route('/graph/<string:id>/<string:aid>/<string:cid>', methods=['GET', 'POST'])
@is_log_in
def getGraph(id, aid, cid):
    graph = pygal.Line()
    graph.title = 'Evolution of Cycle'
    # prepare detail for Charting
    xlabel = []
    balance = []
    detail = list(get_cycle_detail_by_date(id, aid, cid))
    for d in detail:
        for dd in d['details']:
            xlabel.append(dd['create_date'])
            balance.append(dd['balance'])


    graph.x_labels = xlabel
    graph.add('Balance', balance)
    graph_data = graph.render_data_uri()

    return render_template('cycle/chart.html', detail=graph_data)

Answer 1

Создайте конечную точку, которая возвращает визуализированный HTML, а затем загрузите ее, используя JavaScript (XHR), когда пользователь нажимает кнопку #account_detail.

Пример колбы:

@app.route('/chart')
def chart():
    return render_template('chart.html')

JavaScript:

$("#account_detail").on("click", "#sh_chart", function() {
        $("#chart").toggle();

        var current_row = $(this).closest('tr')
        var cid = current_row.find('td:eq(0)').text();
        $("p#chart_cid").text(cid);

        $.get('/chart', function (data) {
            $('#chart').html(data);
        });

       // Edit, i guess you could also do it like this:
       // $('#chart').load('/chart');
    });

HTML:

<div id="chart" style="display:none"></div>