2017-08-15 11 views
0

2つのブートストラップセレクトと送信ボタンを含むフォームで構成されるフラスコのWebページに、フォリアームマップを表示しようとしています。フォーム要素は、マップがロードされる前に正常に動作します。しかし、地図がロードされると、selectはクリックできません。bootsrap select with folium map

これは私のPythonスクリプト

from flask import Flask, render_template, request 
import folium 

app = Flask(__name__) 
@app.route("/home") 
def home(): 
    return render_template("home.html") 

@app.route("/result", methods =['POST']) 
def result(): 
    map = folium.Map(location=[53.3975054,-10.1987964], zoom_start =9, tiles ='Stamen Terrain') 
    map.save(outfile='templates/countries.html') 
    return render_template("result.html") 

if __name__=="__main__": 
    app.run(debug = True) 

home.html

<!DOCTYPE html> 
<html> 
<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css')}}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sl-slide.css')}}"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> 



</head> 
<body> 

<section id="about-us" class="container main"> 
     <div class="row-fluid"> 
      <div class="span8" > 
       <div class="blog"> 

        <div class="blog-item well"> 
        <a href="#"><h2>Heading2</h2></a> 
        <form action="{{ url_for('home') }}" method="POST"> 
         <div class="form-group"> 
        <select class="selectpicker" name="select_country" data-live-search="true" data-style="btn-primary"> 
        <option >Country1</option> 
        <option >Country2</option> 
        </select> 

        <select class="selectpicker" name="select_event" data-live-search="true" data-style="btn-primary"> 
         <option >Event1</option> 
<option >Event1</option> 
        </select> 

        <input type="submit" class="btn btn-info" value="Submit Button"> 
        </div> 
       </form> 

        </div> 

     </div> 
    </div> 
</div> 
</section> 

{%block content%} 
{%endblock%} 
</body> 
</html> 

result.html

{%extends "home.html"%} 
<div> 
{%block content%} 
{%include "countries.html"%} 
{%endblock%} 
</div> 

私はこれをどのように修正することができますか?

答えて

0

マップを表示するためにhtmlファイル内のiframeを使用したときに機能しました。