Flask: Bootstrap Tabs

I made 4 different pages / views under each tab in which information is loaded dynamically. If you download information on one tab and switch to another, then it will be deleted. How can I make all tabs work independently of each other?

directory structure:

layout:

<!doctype html>
<html lang="en">
  <head>
   ...
  </head>
  <body> 
    {% include 'includes/navbar.html' %}
    {% block body %} {% endblock %}
  </body>
</html>

navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">FAQ</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="/wellness">Wellness</a></li>
      <li class="nav-item"><a class="nav-link" href="/ratemds">RateMDs</a></li>
      <li class="nav-item"><a class="nav-link" href="/healthgrades">Healthgrades</a></li>
      <li class="nav-item"><a class="nav-link" href="/gaswork">Gaswork</a></li>
    </ul>
  </div>
</nav>

wellness:

{% extends "layout.html" %}

{% block title %} Wellness {% endblock %}

{% block body %}
  <div class="input-group justify-content-center">
    <input type="text" placeholder="Specialty" id="specialty" class="form-control col-3 mr-2">
    <input type="text" placeholder="State" id="state" class="form-control col-3 mr-2">
    <input type="text" placeholder="City" id="city" class="form-control col-3 mr-2">
    <button id="scrape" class="btn btn-success mr-2">Scrape</button>
  </div>
    
  <p id="status" class="ml-4 text-center"></p> 
  <div id="output" class="mt-4"></div>
  
    <script type="text/javascript">
      ...
    </script>

{% endblock %}

flask app:

@app.route('/')
def home():
    return render_template('faq.html')

@app.route('/<page_id>')
def page(page_id):
    page_name = f"{page_id}.html"
    return render_template(page_name)

tab switching:

127.0.0.1 - - [19/May/2020 13:45:57] "GET /wellness HTTP/1.1" 200 -
127.0.0.1 - - [19/May/2020 13:46:00] "GET /healthgrades HTTP/1.1" 200 -
127.0.0.1 - - [19/May/2020 13:46:05] "GET /gaswork HTTP/1.1" 200 -

Flask: Bootstrap Tabs

0 Answers