python - 模态在动态烧瓶网站中不起作用，所有浏览器
问题描述
我正在烧瓶中建立一个网站，并且在引导模式的功能方面存在一些问题。在 Firefox、Chrome 和 Safari 中确认了该问题。
用户可以在主路线上的 A、B 和 C 三个选项之间进行选择。选择需要稍微不同的形式。提交后，服务器查询数据库并呈现一些数据，仍然在同一条路线上，如果将结果传递到模板中，页面看起来会有所不同，然后用户可以展开呈现的数据并移动以阅读更多内容。这是问题发生的地方，在第二个模式上。以前，没有问题。现在很难，只有 for 循环中的第一个模式按预期工作。所有其他人只是使屏幕变暗，而不向用户显示模式。它们在 html 源代码中看起来不错。
让我们看一下代码。这是 route.py，FormA、B 和 C 非常相似（并且可以工作），我省略了冗余代码。我认为 route.py 上的代码很好。
from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectField
from wtforms.validators import DataRequired
class FormA(FlaskForm):
selection_1 = SelectField(u'Selector 1', choices=['1.A', '1.B'], validators=[DataRequired()])
selection_1 = SelectField(u'Selector 2', choices=['2.A', '2.B'], validators=[DataRequired()])
submit = SubmitField('Submit!')
def database_query(one, two, three):
# queries the database and returns values, that depend on the choices from form
# code works and does not matter to the problem, thus is omited for brevity.
return
@main.route('/', methods=["GET", "POST"])
@main.route('/home', methods=["GET", "POST"])
def home():
choices = ['A', 'B', 'C', ]
form_a = FormA()
form_b = FormB() # Form B and C are just like A,
form_c = FormC() # but with different choices for selector 1 and 2
if form_a.validate_on_submit():
result, info = database_query('A', choices, form_a)
return render_template('main/home.html', choices=choices,
form_a=form_a, form_b=form_b, form_c=form_c,
result=result, info=info)
if form_b.validate_on_submit():
result, info = database_query('B', choices, form_b)
return render_template('main/home.html', choices=choices,
form_a=form_a, form_b=form_b, form_c=form_c,
result=result, info=info)
if form_c.validate_on_submit():
result, info = database_query('C', choices, form_c)
return render_template('main/home.html', choices=choices,
form_a=form_a, form_b=form_b, form_c=form_c,
result=result, info=info)
return render_template('main/home.html', choices=choices, form_a=form_a, form_b=form_b, form_c=form_c)
所以，所有这些东西都有效，让我绊倒并让我拔头发的是使用引导程序 5.1 的引导程序模式的行为。在第一次通过返回渲染+模板时，当我传入选择而不是结果时，一切都很好。这是html模板，当然这里还有很多，我删除了所有与手头问题无关的东西：
{% extends "layout.html" %}
{% block content %}
{% if result %}
{% for item in result %} <!-- MODAL RESULT WORKS ONLY FOR VERY FIRST item in for, not any since -->
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-{{item.id}}">Expand</a>
{% endfor %}
{% else %}
{% for choice in choices %} <!-- MODAL CHOICE WORKS FINE -->
<a href="#" class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#Choice-{{ choice }}">Select</a>
{%endfor%}
{% endif %}
<!-- Modal -->
{% if result %}<!-- Modal on second round -->
{% for item in result %}<!-- Modal to display lens information -->
<div class="modal fade" id="modal-{{item.id}}" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-{{item.id}}-title">{{item.property}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- REMOVED -->
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}<!-- Modal to select format -->
<div class="modal fade" id="Choice-A" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Header</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- REMOVED -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="Choice-B" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Header</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- REMOVED -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="Choice-C" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Header</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- REMOVED -->
</div>
</div>
</div>
</div>
{% endif %}
{% endblock content %}
最后，一些来自浏览器的源 html。该循环在文件末尾按预期工作并显示模态，但没有任何功能。modal-1 工作正常，所有其他只会使屏幕变暗。我不明白为什么，我错过了什么？感谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
/>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/main.css" />
<title></title>
</head>
<body>
<!-- Main Content, Grid Boxes -->
<section class="bg-light p-3 p-lg-5 p-md-4">
<div class="container">
<div class="wrapper px-5 px-md-3">
<div class="card bg-secondary text-dark" style="--bs-bg-opacity: .4;">
<div class="card-body">
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-1">More</a>
</div>
</div>
<div class="card bg-secondary text-dark" style="--bs-bg-opacity: .4;">
<div class="card-body card-grid-wrap">
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-130">More</a>
</div>
</div>
<div class="card bg-secondary text-dark" style="--bs-bg-opacity: .4;">
<div class="card-body card-grid-wrap">
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-23">More</a>
</div>
</div>
<div class="card bg-secondary text-dark" style="--bs-bg-opacity: .4;">
<div class="card-body card-grid-wrap">
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-14">More</a>
</div>
</div>
<div class="card bg-secondary text-dark" style="--bs-bg-opacity: .4;">
<div class="card-body card-grid-wrap">
<a class="btn btn-outline-primary btn-sm" style="float:right;" href="#"
data-bs-toggle="modal"
data-bs-target="#modal-15">More</a>
</div>
</div>
</div>
</div>
</section>
<!-- REMOVED -->
<!-- Modal -->
<!-- Modal to display more information -->
<div class="modal fade" id="modal-1" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<!-- REMOVED -->
</div>
<!-- Modal to display more information -->
<div class="modal fade" id="modal-130" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<!-- REMOVED -->
</div>
<!-- Modal to display more information -->
<div class="modal fade" id="modal-23" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<!-- REMOVED -->
</div>
<!-- Modal to display more information -->
<div class="modal fade" id="modal-14" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<!-- REMOVED -->
</div>
<!-- Modal to display more information -->
<div class="modal fade" id="modal-15" tabindex="-1" aria-labelledby="enrollLabel" aria-hidden="true">
<!-- REMOVED -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiYnRyYXZlcnN5IiwiYSI6ImNrbmh0dXF1NzBtbnMyb3MzcTBpaG10eXcifQ.h5ZyYCglnMdOLAGGiL1Auw'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-71.060982, 42.35725],
zoom: 18,
})
</script>
</body>
</html>
解决方案
弄清楚了。有一个未关闭的<div>标签。放进去，问题就解决了。现在按预期工作。
推荐阅读
- java - 使用 Spring ConfigurationProperties 绑定到 Enum 和 List 属性的 Map
- xaml - 错误 MSB4095：如何在 Visual Studio 项目属性对话框中正确添加其他设置？
- ios - 在 epoch 时间戳之间从 Core Data 中获取数据不一致
- javascript - 必须单击两次才能在 JavaScript 中触发事件
- c - 为什么这个错误看起来像它有一个模式？二分查找 C
- javascript - 有没有办法在 node.js 中读取和写入二维数组到 .db 或 .txt 文件
- python - Pandas read_csv PermissionError: [Errno 1] Operation not allowed: Jupyter Notebook
- ios - SwiftUI 将 vstack 推送到屏幕的剩余长度
- android - 为房间数据库创建类型转换器的问题
- github - 如何制作基于组织的 GitHub 代币？