为什么在渲染模板部分时无法应用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有同样的问题。