I am developing a small app with flask and bootstrap. I would like to be able to make different separate modules for the user interface (a menu that will occupy the entire left column, and a central work panel with several sub-panels). I would like to be able to call these panels by calling various functions:
- This is main template:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
{% extends "bootstrap/base.html" %}
{% block html_attribs %} lang="es"{% endblock %}
<title>Title app</title>
</head>
<body>
{% block selector %}
{% endblock %}
<div class="container">
<div class="row align-items-start">
<div class="col menu">
MENU MODULE <--- LOAD HERE MENU SEGMENT BELOW
</div>
<div class="col contenido">
</div>
</div>
</div>
</body>
</html>
Here is the menu segment I want to put in that main template:
<ul class="list-group">
<li class="list-group-item">
Option 1
</li>
<li class="list-group-item">
Option 2
</li>
</ul>
And finally, the flask code that returns the fragments, which in this case are very simple:
from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app)
@app.route("/")
def index():
data = render_template ("index.html") <--- I would like load data from here, but loading automatically /menu
return data
@app.route("/menu")
def test_list():
data = render_template("list_test.html")
return data
The question: I want to call the index page and load all its elements separately (each one by its function). Also, if bootstrap modifies the position of some element on the screen, I'd like to be able to preserve the positions. The mechanism that flask offers to do something similar is to inherit templates, but in that case ONLY one function is called and one template is loaded at a time. This is NOT what I'm looking for, but to be able to: 1. load everything separately and 2. preserve the changes in the positions of the panels that the user makes.
-------------- EDIT-----------
Edit to focus on the problem: I want to load different snippets from the web (in the example of index.html it would be "Menu Module"). Template inheritance doesn't work for me because fragments aren't loaded separately. In the example, I would call the function to call / and I would like the /menu information to be loaded automatically into "menu module".
