python - bootsrap select not working with folium map -


i trying dispaly folium map in flask web page consists of form containing 2 bootstrap selects , submit button. form elements work fine before map loaded. when map loaded selects not clickable.

this python script

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> 

how can fix this?

it worked when used iframe inside html file display map.


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -