Python Flask jinja2包含页面

Question

我使用Flask包含在Jinja中的问题： 我有一个带有“操作”按钮的列表页面：

黑色按钮具有href并使用JQuery将图形页面切换到div部分（见下文）来切换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的终结点，然后在用户单击#account_detail按钮时使用JavaScript（XHR）加载它。

烧瓶示例：

@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>