烧瓶只是刷新页面的模板部分

Question

I have a simple flask app that uses templates.我有一个使用模板的简单烧瓶应用程序。

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.每次我单击导航上的某个位置（在 base.html 中）时，它都会刷新整个页面，我宁愿它只是在模板内刷新，因为我在导航栏中有可折叠的元素，当整个页面是重新加载。

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?当我单击导航栏中的链接时，如何重新加载要渲染的新模板而不是导航栏？

for reference here's some code:供参考，这里有一些代码：

base.html base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script>
      // 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');
      }
    </script>
    <style>
    </style>

    {% include 'nav-mini.html' %}

    <!-- Bootstrap row -->
    <div class="row" id="body-row">

        {% include 'nav-side.html' %}

        <!-- MAIN -->
        <div class="col py-3">
          <article class=flashes>
            {% with messages = get_flashed_messages() %}
              {% if messages %}
                <ul>
                  {% for message in messages %}
                    <li>{{ message}}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endwith %}
          </article>

          {% block content %}
          {% endblock %}
        </div>
        <!-- Main Col END -->

    </div>
    <!-- body-row END -->
  </body>
</html>

sidenav.html sidenav.html

<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block col-2">
    <ul class="list-group sticky-top sticky-offset">
      {% if sidenavs %}
        {% for heading, stuff in sidenavs.items() %}
          <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
            <a href="#page{{heading}}" data-toggle="collapse" class="dropdown-toggle">
              <br />
              {{ heading }}
            </a>
          </li>
          <br />
          <ul class="collapse list-unstyled" id="page{{heading}}">
          {% for name, address in stuff.items() %}
            <a href="{{ address }}" class="bg-dark list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-start align-items-center">
                <span class="fa fa-tasks fa-fw mr-3"></span>
                <span class="menu-collapsed">{{ name }}</span>
              </div>
            </a>
          {% endfor %}
          </ul>
        {% endfor %}
      {% endif %}
    </ul>
    <div class="footer">
      <h3><center>WCF Insurance</center></h3>
    </div>
</div>
<!-- sidebar-container END -->

App.py (flask app) App.py（烧瓶应用）

...
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)

Notice I'm using the render_template() flask function.请注意，我正在使用render_template()烧瓶函数。

Answer 1

I added a JavaScript function call to the onload property of the body tag with the following code in it我在 body 标记的 onload 属性中添加了一个 JavaScript 函数调用，其中包含以下代码

 function setMenuState(){ if (window.sessionStorage.getItem("MenuState") == null){ window.sessionStorage.setItem("MenuState", "--isHidden"); } if(window.sessionStorage.getItem("MenuState") != "--isHidden"){ toggleMenu(); window.sessionStorage.setItem("MenuState", ""); } } function toggleMenu(){ const textnames = ["","",""] const sidebarE1 = document.getElementsByClassName("sidebar")[0]; const contentE1 = document.getElementsByClassName("content")[0]; let menuItems = document.getElementsByClassName("fa"); sidebarE1.classList.toggle("sidebar--isHidden"); contentE1.classList.toggle("content--isHidden"); for(item in menuItems){ if(menuItems[item].innerHTML === textnames[item]){ menuItems[item].innerHTML = ""; }else{ menuItems[item].innerHTML = textnames[item]; } } if(window.sessionStorage.getItem("MenuState") != "--isHidden"){ window.sessionStorage.setItem("MenuState", "--isHidden"); }else{ window.sessionStorage.setItem("MenuState", ""); } }

 <body onload="setMenuState()">

This still runs the animation of the menu if it's open when you click on a link, but it retains the open/closed state in session storage.如果单击链接时菜单处于打开状态，它仍会运行菜单的动画，但它会在会话存储中保留打开/关闭状态。

UPDATE: I have solved(mostly) the animations issue where the menu animation would play on page load.更新：我已经解决了（大部分）菜单动画将在页面加载时播放的动画问题。

 function setMenuState(){ const sidebarE1 = document.getElementsByClassName("sidebar")[0]; const contentE1 = document.getElementsByClassName("content")[0]; if (window.sessionStorage.getItem("MenuState") == null){ window.sessionStorage.setItem("MenuState", "--isHidden"); } if(window.sessionStorage.getItem("MenuState") != "--isHidden"){ toggleMenu(); window.sessionStorage.setItem("MenuState", ""); } setTimeout(()=>{ if(!sidebarE1.classList.contains("sidebar-animated")){ sidebarE1.classList.add("sidebar-animated"); contentE1.classList.add("content-animated"); }}, 250); }

 .content { background-color: #000000; padding: 2rem; height: 100vh; position: fixed; width: 100%; opacity: 1; margin-left: 4rem; color: #00ff00; top: 8rem; overflow: scroll; padding-bottom: 32rem; z-index: 1; } .content-animated { transition: transform 500ms linear; }

by moving the actual transition property into its own css class, and only adding the class ~250ms after page load, the position and state of the menu is set without animation, and the animation is set before first click.通过将实际的transition属性移动到它自己的css类中，并且在页面加载后才添加类~250ms，设置菜单的位置和状态，不设置动画，在第一次点击之前设置动画。

烧瓶只是刷新页面的模板部分

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-01 03:04:14

烧瓶只是刷新页面的模板部分

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-01 03:04:14

解决方案1
1 已采纳 2022-05-01 03:04:14