Flask - как получить идентификатор сообщения после нажатия на заголовок

Question

Я создаю просто сайт о книгах. Я показываю название и описание в books.html

<div id="book-container">
<p><h2>{{ b.title }}</h2></p>
<div><p>{{ b.description }}</p></div>
<br>
</div>

и мой файл маршрута

@app.route('/show_books', methods=['GET', 'POST'])
def show_books():
    books = Book.query.all()
    return render_template('books.html', title='Home', books=books)

У меня проблема, потому что я хочу показать больше информации о книге после нажатия на заголовок. Каков наилучший способ сделать это? Спасибо за помощь!

Answer 1

Хорошо, я нахожу другое решение, но оно не работает:

book.html:

<div id="book-container">
<a href="{{ url_for('detail_book', title=b.title) }}">{{ b.title }}</a>
<div><p>{{ b.description }}</p></div>
<br> 
</div>

routes.py:

@app.route('/detail_book/<title>')
def detail_book(title):
    book = Book.query.filter_by(title=title).first_or_404()
    return render_template('detail_book.html', book=book)

detail_book.html:

DETAILS
<div id="book-container">
    {{ b.id }}
    <h2>{{ b.title }}</h2>
    <div><p>{{ b.description }}</p></div>
    <br>
</div>

После нажатия на заголовок мой URL выглядит так: http://localhost:5000/detail_book/Painted%20Man

И в консоле: jinja2.exceptions.UndefinedError: 'b' не определено

И я действительно понятия не имею, как решить эту проблему

Answer 2

Похоже, в detail_book есть переменная книга, а не b.

В шаблоне рендеринга вы используете переменную book.

Ниже приведен пример HTML-кода.

DETAILS
<div id="book-container">
    {{ book.id }}
    <h2>{{ book.title }}</h2>
    <div><p>{{ book.description }}</p></div>
    <br>
</div>

Answer 3

Вы можете использовать this для доступа к заголовку, который вы щелкнули. И this.id даст вам идентификатор этого элемента:

<div id="book-container">
    <a href=""><h2 id="{{ b.title}}" class="titles">{{ b.title }}</h2></a>
    <div><p>{{ b.description }}</p></div>
    <br>
</div>

<script type=text/javascript>
    $(function(){
        $('.titles').bind('click', function(){
            alert(this.id);
        });
    });
</script>

Нажав на заголовок, вы увидите модальное обозначение идентификатора текущего элемента (в этом случае идентификатор будет названием книги).

Идея состоит в том, чтобы добавить класс .titles ко всем заголовкам , которые появятся на вашей странице, и восстановить, this.id, id элемента, который вы нажмите кнопку. Затем вы можете сделать запрос Ajax, чтобы найти дополнительную информацию, соответствующую конкретному элементу, на котором вы щелкнули.