烧瓶中的破碎模态

Question

在我的页面上，我对菜单和页面上的各个章节进行 cms，我希望添加新章节和已经存在的章节，以便可以对其进行编辑。我只是通过 jquery 和 bootstrap 模态对话框进行操作，但每次单击编辑时它都不想工作，因此我的模态对话框不会出现，并且出现 404 错误。添加章节时，那里根本什么都没有出现，没有错误，没有消息或在调试模式下什么也没有。我需要帮助。预先感谢您的帮助。 PS：删除章节对我有用

HTML 代码（更新）：

{% extends "base.html" %} {% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

{%if session["group"] == "Admin"%}
<div class="container">
    <div class="row">
        <div class="col md-12">
            <h2>Kapitoly</h2>
                <button type="button" class="btn btn-success  pull-right" data-toggle="modal" data-target="#myModal">Přidat kapitolu</button> 
                <br>
                <br>
                {%with messages = get_flashed_messages()%}
                {%if messages%}
                {% for message in messages %}
                <div class="alert alert-success alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label ="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    {{message}}
                </div>
                {%endfor%}
                {%endif%}
                {%endwith%}
                
                        <table class="table table-striped">
                        <tr>
                            <th>ID</th>
                            <th>Ročník</th>
                            <th>Název</th>
                            <th>Akce</th>
                        </tr>
                        {% for row in chapters %}
                        <tr>
                            <td>{{row.0}}</td>
                            <td>{{row.1}}</td>
                            <td>{{row.2}}</td>
                            <td>
                                <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#modaledit{{row.0}}">Upravit</a>
                                <a href="/delete_chapter/{{ row.0 }}" class="btn btn-danger btn-xs" onclick="return confirm('Are You Sure For Delete?')">Smazat</a>
                            </td>
                        </tr>
                <div id="modaledit{{row.0}}" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Upravit kapitolu</h4>
                        </div>
                        <div class="modal-body">
                            <form action="{{ url_for('update') }}" method="POST">
                            <div class="form-group">
                                <label>Ročník:</label>
                                <input type="hidden"  name="id" value="{{row.0}}">
                                <input type="text" class="form-control" name="year" value="{{row.1}}">
                            </div>
                            <div class="form-group">
                                <label>Název:</label>
                                <input type="text" class="form-control" name="title" value="{{row.2}}">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="sbumit">Upravit</button>
                            </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        <div class="back">
                            <a href="manager_chapter" type="button" class="btn btn-default" data-dismiss="modal">Vrátit se zpátky.</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor  %}
            </table>
        </div>
    </div>
<!-- Modal -->
<div id="mymodal" class="modal fade" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Vytvořit kapitolu</h4>
         </div>
         <div class="modal-body">
            <form action = "/add_chapter" method="POST">
                <div class="form-group">
                  <label>Ročník:</label>
                  <input type="text" class="form-control" name="year" required="1">
                </div>
                <div class="form-group">
                  <label>Název:</label>
                  <input type="text" class="form-control" name="title" required="1">
                </div>
                <div class="form-group">
                  <button class="btn btn-primary" type="submit">Vytvořit</button>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
{%endif%}

Flask 代码（更新）：

@app.route("/manager_chapter")
@isLoggedIn
def manager_chapter():
    cur = mysql.connection.cursor()
    cur.execute("SELECT  * FROM chapters")
    data = cur.fetchall()
    cur.close()
    return render_template('manager_chapter.html', chapters=data, id_data=id)

@app.route("/add_chapter", methods=["POST"])
@isLoggedIn 
def add_chapter():
    if request.method == "POST":
        flash("Kapitola je uspěšně přidaná.")
        year = request.form['name']
        title = request.form['email']
        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO chapters (year, title) VALUES (%s, %s)", (year, title))
        mysql.connection.commit()
        return render_template('manager_chapter.html')

@app.route('/update_chapter/<string:id_data>', methods=['POST','GET'])
@isLoggedIn
def update(id_data):
    if request.method == 'POST':
        id_data = request.form['id']
        year = request.form['year']
        title = request.form['title']
        cur = mysql.connection.cursor()
        cur.execute("""
               UPDATE chapters
               SET year=%s, title=%s
               WHERE id=%s
            """, (year, title, id_data))
        flash("Kapitola je uspěšně upravená.")
        mysql.connection.commit()
        return redirect(url_for('manager_chapter'))

@app.route('/delete_chapter/<string:id_data>', methods=['GET'])
def delete(id_data):
    flash("Kapitola je uspěšně smazána.")
    cur = mysql.connection.cursor()
    cur.execute("DELETE FROM `chapters` WHERE id=%s", (id_data,))
    mysql.connection.commit()
    return render_template('manager_chapter.html')

点击某一章节中的编辑后出现 404 错误示例：

Answer 1

1. 下次，如果您要发布给讲英语的人，请在发布之前翻译您的源代码。根据您的 cmets，我将假设您的编辑按钮是这个

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

您同时拥有href 和data-target 属性。后者用于模态对话框。我不相信您可以同时拥有两者并让它们指向不同的网址。根据 [bootstrap][1] 文档，您应该使用 href 链接，它的值应该是您的模态目标的 id。所以我认为你的代码应该是

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

或

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

1. 如果我们假设您的模式没有被触发，因为它被视为一个直接的超链接，因此href 中的 url 被触发，它会引发第二个问题。该网址的烧瓶路线仅包含 POST 的代码。您需要为 GET 位添加代码。此外，您的路线有一个变量id_data，但该变量不是您路线的一部分，即您应该有

    @app.route('/update_chapter/<string:id_data>', methods=['POST','GET'])
    @isLoggedIn
    def update(id_data):

更新 - 基于 OP 的 cmets

1. 您的按钮代码现在调用模式。
2. 模态框有一个表单，并且该表单有一个章节 ID 的隐藏字段。基于此，您的路线现在应该是

    @app.route('/update_chapter', methods=['POST'])
    @isLoggedIn
    def update():
       if request.method == 'POST':
           id_data = request.values.get("id", None) 
           # I prefer to use request.values.get so that I don't 
           # have to worry about if my method is a POST or GET

  [1]: https://getbootstrap.com/docs/4.1/components/modal/