I want to load a page with Bootstrap modal using ajax. Scenario is like,
- When a button is clicked,
- The button will call ajax to get data,
- From flask, it will get related data from DB and return the data in JSON format,
- In ajax success part, it will dynamically generate modal page and show it up.
I wasn't able to find a good example and I'm getting errors even returning html page.
My sample code runs on
<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>
and flask part will return
@app.route('/ajax2')
def ajax2():
return app.send_static_file(url_for('static', filename='../templates/ajax2.html'))
but it generates 404 error even from beginning. Please help.
