0
ajaxを使ってBootstrapモーダルでページをロードしたい。シナリオは、ボタンをクリックすると、ボタンがフラスコから Flask ajax modal
- ある
- ajaxの成功部分では、モーダルページを動的に生成して表示します。
私は良い例を見つけることができず、HTMLページを返してもエラーになります。
私のサンプルコードは
@app.route('/ajax2')
def ajax2():
return app.send_static_file(url_for('static', filename='../templates/ajax2.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>
とフラスコ部に実行されますが、それは最初からも、404エラーが発生します。助けてください。
私の推薦は、さまざまなコンポーネントとデバッグそれぞれの作品にこれを打破することです。いくつかの素晴らしいモーダルの例[ここ]（https://getbootstrap.com/javascript/#modals）。両方の部分は現在間違っています。 404は、リンクが存在しないリソースを要求していることを意味します。これが起こらないように、FlaskのHTMLテンプレート内の任意のリンクの中で 'url_for（）'を使うべきです。実際のモーダルをテンプレートに追加する必要があります。ブートストラップはモーダルを作成するためにページにHTMLを挿入するだけではありません。例を参照してください。 – abigperson
@PJSantoroまずはあなたのコメントをお寄せいただきありがとうございます。モーダルは、非表示機能では必ずしも実装されていないようです。この例題 "http://jquerymodal.com/"を見ると、動的に外部HTMLページをモーダルとしてロードします。これは私がしたいことです。私の映画リストにはたくさんの映画があり、それぞれのアイテムをクリックするとモーダルがポップアップします。私は、私の場合、各項目を動的にロードする方が効率的になると思います。ありがとう。 –
@PJSantoro https://jsfiddle.net/ednon5d1/これは外部HTMLファイルをモーダルに呼び出す別の例です。 –