2017-06-04 52 views
0

我想使用ajax加載一個Bootstrap模式的頁面。情景就像是,Flask ajax modal

  1. 當點擊一個按鈕,
  2. 該按鈕將調用Ajax來獲取數據,
  3. 從燒瓶,它會被從DB JSON格式返回數據的相關數據,
  4. 在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錯誤。請幫忙。

+0

我的建議是打破這種分解成各個組成部分和調試每件:通過XHR 2瓶從1)請求HTML)引導模態。一些很棒的模式示例[這裏](https://getbootstrap.com/javascript/#modals)。兩件都是錯的。 404意味着你的鏈接正在請求一個不存在的資源。你應該在Flask的HTML模板的任何鏈接中使用'url_for()'來避免這種情況發生。您還需要在模板中添加實際模態,bootstrap不會將HTML注入到頁面中以創建模態...請參閱示例。 – abigperson

+0

@PJSantoro首先感謝您的評論。 Modal似乎不一定用隱藏功能來實現。如果你看看這個例子,「http://jquerymodal.com/」,它會動態地將外部html頁面加載爲模態。這是我想要做的事情。我的電影列表有很多電影,當我點擊每個項目時,將彈出一個模式。我認爲動態加載每個項目在我的情況下會更有效率......任何想法?謝謝。 –

+0

@PJSantoro https://jsfiddle.net/ednon5d1/這也是調用外部html文件模態的另一個例子.. –

回答

-1

你可以寫:$('id_body_modal').html(html); $('id_modal').modal('show');

+0

感謝您的評論,但我想加載一個外部html文件模態。不是這樣的.. –