Flask ajax modal

我想使用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错误。请帮忙。

来源

2017-06-04 Hangil Kang

我的建议是打破这种分解成各个组成部分和调试每件：通过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文件模态的另一个例子.. –

-1

你可以写：$('id_body_modal').html(html); $('id_modal').modal('show');

来源

2017-06-04 17:03:34

感谢您的评论，但我想加载一个外部html文件模态。不是这样的.. –

Flask ajax modal

回答

相关问题