0
我想使用ajax加載一個Bootstrap模式的頁面。情景就像是,Flask ajax modal
- 當點擊一個按鈕,
- 該按鈕將調用Ajax來獲取數據,
- 從燒瓶,它會被從DB JSON格式返回數據的相關數據,
- 在ajax的成功部分,它會動態生成模態頁面並顯示出來。
我無法找到一個很好的例子,並且即使返回html頁面也出現錯誤。
我的示例代碼上
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="../static/css/jquery.modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
event.preventDefault();
$.get(this.href, function(html) {
$(html).appendTo('body').modal();
});
});
</script>
</head>
<main>
<a href="/ajax2" id="manual-ajax">second example</a>
</main>
</html>
和燒瓶部分運行將返回
@app.route('/ajax2')
def ajax2():
return app.send_static_file(url_for('static', filename='../templates/ajax2.html'))
,但它從開始甚至產生404錯誤。請幫忙。
我的建議是打破這種分解成各個組成部分和調試每件:通過XHR 2瓶從1)請求HTML)引導模態。一些很棒的模式示例[這裏](https://getbootstrap.com/javascript/#modals)。兩件都是錯的。 404意味着你的鏈接正在請求一個不存在的資源。你應該在Flask的HTML模板的任何鏈接中使用'url_for()'來避免這種情況發生。您還需要在模板中添加實際模態,bootstrap不會將HTML注入到頁面中以創建模態...請參閱示例。 – abigperson
@PJSantoro首先感謝您的評論。 Modal似乎不一定用隱藏功能來實現。如果你看看這個例子,「http://jquerymodal.com/」,它會動態地將外部html頁面加載爲模態。這是我想要做的事情。我的電影列表有很多電影,當我點擊每個項目時,將彈出一個模式。我認爲動態加載每個項目在我的情況下會更有效率......任何想法?謝謝。 –
@PJSantoro https://jsfiddle.net/ednon5d1/這也是調用外部html文件模態的另一個例子.. –