Flask中Bootstrap模态框无法弹出 章节新增编辑功能报错求助

问题排查及修复方案 #

1. 模态框无响应问题修复 #

你使用的是Bootstrap 5版本，模态框触发/关闭的属性和Bootstrap 4不兼容，同时存在ID大小写不匹配的问题：

• 所有触发模态框的按钮/关闭按钮，把data-toggle替换为data-bs-toggle，data-target替换为data-bs-target，data-dismiss替换为data-bs-dismiss
• 新增章节按钮的data-bs-target值为#myModal，对应新增模态框的ID改成大写的myModal，和按钮目标保持一致
• 编辑按钮用button标签替换a标签，避免无href属性时的默认跳转行为，写法参考：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modaledit{{row.0}}">Upravit</button>

2. 编辑提交404问题修复 #

编辑表单的路由参数缺失导致路径错误：

• 编辑表单的action属性修改为：

<form action="{{ url_for('update', id_data=row.0) }}" method="POST">

• 修复编辑提交按钮的拼写错误：把type="sbumit"改成type="submit"
• 把编辑模态框的代码移出<table>标签范围，放在列表循环结束后、新增模态框之前的位置，避免HTML结构不合法导致的ID匹配失效

3. Flask后端逻辑修复 #

• 修复add_chapter接口的字段取值错误，把：

year = request.form['name']
title = request.form['email']

替换为：

year = request.form['year']
title = request.form['title']

• add_chapter、delete接口处理完逻辑后，不要直接render_template，改成重定向到列表页，避免重复提交和路径错误：

# add_chapter最后一行改成
return redirect(url_for('manager_chapter'))
# delete最后一行改成
return redirect(url_for('manager_chapter'))

• 删掉manager_chapter函数返回值里无用的id_data=id参数，避免未定义变量报错

内容的提问来源于stack exchange，提问作者Jakub Mitrega