How to call multiple routes inside one route?

Question

I have a dashboard.html page which contains three tabs. The view of these tabs by look is same but has different functionality as they are rendered from differe

Answer 1

I can find two ways to make tab show: 1. Using ajax and embed HTML 2. Using page load by inherit layout in sub-layout

1.Using Ajax (I am using JQuery Ajax)

// Python
@app.route('/get-tab/<int:id>')
def get_tab(id):
    return render_template('tab-template.html')

// View
 {% extends 'layout/base.html' %}

 {% block content %}
     <button class="btn btn-primary btn-sm" onclick="loadPage(1)">First</button>
     <button class="btn btn-default btn-sm" onclick="loadPage(2)">Second</button>
     <div id="display"></div>
     <script>
         function loadPage(id) {
             $.ajax({
               type: 'GET',
                url: '/get-tab/' + id,
                success: function (e) {
                   $('#display').html(e);                                                                                                                                                                   
                }
             });
         }
     </script>
  {% endblock %}

Demo: http://phearaeun.pythonanywhere.com/child

2.Inherit base layout to sub layout

--> Base Layout
    --> Child layout
        --> Template

// Base Layout
...

{% block content %}{% endblock %}

...

// Child layout to inherit base layout
...
{% extends 'layout/base.html' %}
{% block content %}
   // Header content
   {% block subcontent %}{% endblock %}
{% endblock %}
...

// Template to inherit child layout
...
{% extends 'layout/child.html' %}
{% block subcontent %}

{% endblock %}