I am trying to dispaly a folium map in a flask web page which consists of a form containing 2 bootstrap selects and a submit button. The form elements work fine before the map is loaded. But when the map is loaded selects are not clickable.
This is my 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 I fix this?
