title: flask just refresh templated portion of page
body: <p>I have a simple flask app that uses templates. </p>
  
  <p>Every time I click somewhere on the navigation (in the base.html) it refreshes the entire page, I'd rather it just refresh inside the template because I have collapsable elements in the navbar that go back to being collapsed when the entire page is reloaded. </p>
  
  <p>How do I just reload the new template I want to render and not the nav bar when I click on a link in the nav bar?</p>
  
  <p>for reference here's some code:</p>
  
  <p>base.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      ...
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script&gt;
        // Hide submenus
        $('#body-row .collapse').collapse('hide');
  
        // Collapse/Expand icon
        $('#collapse-icon').addClass('fa-angle-double-left');
  
        // Collapse click
        $('[data-toggle=sidebar-colapse]').click(function() {
            SidebarCollapse();
        });
  
        function SidebarCollapse () {
            $('.menu-collapsed').toggleClass('d-none');
            $('.sidebar-submenu').toggleClass('d-none');
            $('.submenu-icon').toggleClass('d-none');
            $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
  
            // Treating d-flex/d-none on separators with title
            var SeparatorTitle = $('.sidebar-separator-title');
            if ( SeparatorTitle.hasClass('d-flex') ) {
                SeparatorTitle.removeClass('d-flex');
            } else {
                SeparatorTitle.addClass('d-flex');
            }
  
            // Collapse/Expand icon
            $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
        }
      &lt;/script&gt;
      &lt;style&gt;
      &lt;/style&gt;
  
      {% include 'nav-mini.html' %}
  
      &lt;!-- Bootstrap row --&gt;
      &lt;div class="row" id="body-row"&gt;
  
          {% include 'nav-side.html' %}
  
          &lt;!-- MAIN --&gt;
          &lt;div class="col py-3"&gt;
            &lt;article class=flashes&gt;
              {% with messages = get_flashed_messages() %}
                {% if messages %}
                  &lt;ul&gt;
                    {% for message in messages %}
                      &lt;li&gt;{{ message}}&lt;/li&gt;
                    {% endfor %}
                  &lt;/ul&gt;
                {% endif %}
              {% endwith %}
            &lt;/article&gt;
  
            {% block content %}
            {% endblock %}
          &lt;/div&gt;
          &lt;!-- Main Col END --&gt;
  
      &lt;/div&gt;
      &lt;!-- body-row END --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>sidenav.html</p>
  
  <pre><code>&lt;!-- Sidebar --&gt;
  &lt;div id="sidebar-container" class="sidebar-expanded d-none d-md-block col-2"&gt;
      &lt;ul class="list-group sticky-top sticky-offset"&gt;
        {% if sidenavs %}
          {% for heading, stuff in sidenavs.items() %}
            &lt;li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed"&gt;
              &lt;a href="#page{{heading}}" data-toggle="collapse" class="dropdown-toggle"&gt;
                &lt;br /&gt;
                {{ heading }}
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;br /&gt;
            &lt;ul class="collapse list-unstyled" id="page{{heading}}"&gt;
            {% for name, address in stuff.items() %}
              &lt;a href="{{ address }}" class="bg-dark list-group-item list-group-item-action"&gt;
                &lt;div class="d-flex w-100 justify-content-start align-items-center"&gt;
                  &lt;span class="fa fa-tasks fa-fw mr-3"&gt;&lt;/span&gt;
                  &lt;span class="menu-collapsed"&gt;{{ name }}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            {% endfor %}
            &lt;/ul&gt;
          {% endfor %}
        {% endif %}
      &lt;/ul&gt;
      &lt;div class="footer"&gt;
        &lt;h3&gt;&lt;center&gt;WCF Insurance&lt;/center&gt;&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- sidebar-container END --&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hp9Xp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hp9Xp.png" alt="visual"></a></p>
  
  <p>App.py (flask app)</p>
  
  <pre><code>...
  from flask import Flask, url_for, render_template, redirect, jsonify
  ...
  app = Flask(__name__)
  CWD = os.path.dirname(os.path.abspath(__file__))
  ...
  @app.route('/bokeh-example')
  def page_bokeh_example():
      ''' iframe for Bokeh Example '''
      resp = {
          'mininavs': get_mini_nav(),
          'sidenavs': get_side_nav(),
          'iframe_url': get_iframe_url('Bokeh Example'), }
      return render_template('iframe.html', **resp)
  ....
  if __name__ == '__main__':
      app.run(host='0.0.0.0', port=5020)
  </code></pre>
  
  <p>Notice I'm using the <code>render_template()</code> flask function.</p>