渲染部分模板不使用ajax(烧瓶后端)应用css

时间:2017-11-16 10:19:42

标签: javascript jquery css ajax

为什么在渲染模板部分时无法应用css文件?

我已经研究过render page with model after ajax post ,现在我知道我可以将部分html文件返回到特定的html中的特定div

我的问题,例如:

有2个html文件名 我想将 children.html 填入 father.html ,对我来说还可以!但为什么 children.html 中的标签无法应用css(在 father.css上设置

father.html 有自己的外部文件 father.css father.js

对于father.html:

<html>
<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/father.css') }}">
    <script src="{{ url_for('static', filename='js/father.js') }}"></script>
</head>
<body>
    <div id="container">
        <!-- @@@ children.html here!! Using AJAX @@@ -->
    </div>
</body>
</html>

对于father.js

$.ajax({
    url: '/returnChildrenTemplate',
    success: function(data) {
        $('#container').html(data); // return template into container
    }
})

对于father.css

canvas {
    width: 100px;
    height: 100px;
}

对于children.html:

<table>
{% for r in data %}
<tr>
    <td> {{ r.id }} </td>
    <td> 
        <canvas class="demo" style="background-color: {{r.color }} "></canvas>
    </td>
</tr>
{% endfor %}
</table>

对于后端烧瓶脚本:

@app.router('/returnChildrenTemplate')
def returnChildrenTemplate():
    result = ... # query from Database
    return render_template('children.html', data=result)

它不适用于children.html,其canvas标签仍然是原始大小。

如果我将画布样式设置为 children.html ,它会起作用。 (这很愚蠢)

<head>
    <style>
        canvas {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<table>
...
((  the same as above ))
...
</table>

这是什么问题?有什么方法可以解决这个问题吗?

BTW,father.js有同样的问题。

0 个答案:

没有答案