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
Post a Comment