The browser or proxy sent a request that this server could not understand, 404 Bad request

Question

I am a beginner in this field and in the process of preparing a final project for a CS50 course using Flask, Python and SQLite 3 The error appears when I try to delete the question whose position is first in the list, but the code works for the rest of the questions that are in different indexes I don't know how to solve this bug please help!! Thank you in advance

I have tried to print the id for each question to be deleted. Everyone is printed except for the first one print None, which gives me the error, even though it appears in the application interface.

this is my app.py code

@app.route("/list", methods=["GET", "POST"])
def list():
    if request.method == "POST":
        category = request.form.get("language")
        if category == "All":
            data = db.execute("SELECT * FROM questions")
            question = []
            answer = []
            index = []
            for item in data:
                question.append(item["question"])
                answer.append(item["answer"])
                index.append(item["id"])
            return render_template("list.html", data=zip(question,answer,index))

        if request.form.get("language") == category:
            data = db.execute("SELECT * FROM questions WHERE language=?", category)
            question = []
            answer = []
            index = []
            for item in data:
                question.append(item["question"])
                answer.append(item["answer"])
                index.append(item["id"])
            return render_template("list.html", data=zip(question,answer,index))

    else:
        data = db.execute("SELECT * FROM questions")
        question = []
        answer = []
        index = []
        for item in data:
            question.append(item["question"])
            answer.append(item["answer"])
            index.append(item["id"])
        return render_template("list.html", data=zip(question,answer,index))

@app.route("/delete", methods=["GET", "POST"])
def delete():
    if request.method == "POST":
        index = request.form["delete"]
        print(index)
        db.execute("DELETE FROM questions WHERE id=?", index)
        flash("Questio deleted")
        db.execute("UPDATE questions SET id = id - 1 WHERE id >?", index)
        return redirect("/")
    else:
        data = db.execute("SELECT * FROM questions")
        question = []
        answer = []
        index = []
        for item in data:
            question.append(item["question"])
            answer.append(item["answer"])
            index.append(item["id"])
        return render_template("list.html", data=zip(question,answer,index))

and this is my list.html

{% extends "layout.html" %}

{% block title %}
    list
{% endblock %}

{% block main %}
    <form action="{{ url_for('list')" method="POST">
        <div class="nestedGrid">
            <div class="language">
                <h2>Languages</h2>
                <button class="list-item" name="language" value="All">ALL</button> <br>
                <button class="list-item" name="language" value="python">PYTHON</button> <br>
                <button class="list-item" name="language" value="c">C</button> <br>
                <button class="list-item" name="language" value="javaScript">JS</button> <br>
                <button class="list-item" name="language" value="java">JAVA</button> <br>
            </div>
            <div class="question">
                <h2>Questions</h2>
                <ul class="list">
                    {% for i, j, z in data %}
                    <li class="list-item panel" name=question_deleted>{{ i }}
                        <span class="tooltiptext">Show answer</span>
                    </li>
                    <li class="list-item panel">{{ j }}</li>
                    <form action="{{ url_for('delete')" method="post">
                        <button class="list-item" name="delete" value="{{ z }}">{{ z }} <i class="fa fa-trash"></i> </button>
                    </form>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </form>
{% endblock %}

i attached screen shots of my code and my frontend app is in this repo: screen shots

Answer 1

For everyone who faces the same problem, the problem was in the overlapping of requests between the list and the delete, so I combined them together in the same route using this answer:

multiple requests from the same form

and my app.py will:

@app.route("/list", methods=["GET", "POST"])
def list():
    if request.method == "POST" and "language" in request.form:
        cat = request.form.get("language")

    if request.form['language'] == cat:
        if cat == 'All':
            data = db.execute("SELECT * FROM questions")
            item = []
            answer = []
            id = []
            for x in data:
                item.append(x["question"])
                answer.append(x["answer"])
                id.append(x["id"])
            return render_template("list.html", data=zip(item,answer,id))
        else:
            py = db.execute("SELECT * FROM questions WHERE language = ?", cat)
            py_ques = []
            py_answer = []
            py_id = []
            for i in py:
                py_ques.append(i["question"])
                py_answer.append(i["answer"])
                py_id.append(i["id"])
            return render_template("list.html", data=zip(py_ques,py_answer,py_id))

if request.method == "POST" and "deleted" in request.form:
    id = request.form.get("deleted")
    db.execute("DELETE FROM questions WHERE id=?", id)
    flash("question deleted")
    # rearange ids after deleting a question
    db.execute("UPDATE questions SET id = id - 1 WHERE id > ?", id)
    return redirect("/")

else :
    data = db.execute("SELECT * FROM questions")
    item = []
    answer = []
    index=[]
    for x in data:
        item.append(x["question"])
        answer.append(x["answer"])
        index.append(x["id"])
    return render_template("list.html", data=zip(item,answer,index))

and list.html will:

{% extends "layout.html" %}

{% block title %}
    LIST
{% endblock %}

{% block main %}
    <form action = "/list" method="post">
        <div class="nestedGrid">
            <div class="language">
                <h2>Languages</h2>
                <button class="list-item" name="language" value="All">ALL</button> <br>
                <button class="list-item" name="language" value="python">PYTHON <i class="fab fa-python"></i> </button> <br>
                <button class="list-item" name="language" value="C">C </button><br>
                <button class="list-item" name="language" value="javaScript">JS <i class="fab fa-js"></i></button><br>
                <button class="list-item" name="language" value="java">JAVA <i class="fab fa-java"></i></button><br>
            </div>
            <div class="question">
                <h2>Questions</h2>
                <ul class="list">
                    {% for i, j, z in data %}
                        <li class="list-item accordion" name="question_deleted" value="{{ i }}">{{ i }}
                            <span class="tooltiptext">Show answer</span>
                        </li>
                        <li class="list-item panel" value="{{ j }}">{{ j }}</li>
                        <button class="list-item" name="deleted" value="{{ z }}"><i class="fa fa-trash" ></i></button>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </form>
{% endblock %}

I hope this help