Python Flask jinja2包含页

Question

我在使用Flask在jinja中包含时遇到了一个问题:我有一个带有动作按钮的列表页面，如下所示：

​

​

黑色按钮有href和切换一个分区(显示/隐藏)使用JQuery The graph page into 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>