Как поместить Django-форму в модальное окно Bootstrap?

Question

[Baoo]

Я использую стандартные django.contrib.auth.urls, чтобы отображать формы авторизации. Проблема в том, что если использовать для этих целей модальные окна Bootstrap, то по какой-то причине форма поля ввода формы не передаются в шаблон и выглядит это вот так:

Шаблон модального окна:

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                {% include 'registration/login.html' %}
            </div>
        </div>
    </div>
</div>

Шаблон формы:

<form method="post" action="{% url 'login' %}">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Войти">
    <input type="hidden" name="next" value="{{ next }}">
</form>

Код ссылки:

<a class="nav-link" data-toggle="modal" data-target="#loginModal">Войти</a>

Если перейти по прямому адресу, но элементы формы есть:


Получается, при нажатии на ссылку, становится видно модальное окно, которое просто отображает html, в котором нет переменной form. Выглядит так, что нужно поля формы писать вручную, что не очень правильно. Как это можно исправить?

Answer 1

[Александр Нестеров]

Если я правильно понял - вместе с include используйте with, передав туда форму.

Comments

[Baoo]

Пробовал, но не помогло
Как я представляю себе работу:
Я нажимаю на кнопку, появляется модальное окно, которое отрисовывает html с формой из файла login.html
Но вью вызывается только при переходе по ссылке (запрос на эндпоинт/accounts/login), но при нажатии на кнопку "Войти" непосредственного перехода по ссылке не происходит, поэтому вью не вызывается, соответственно и форма не отрисовывается

[Александр Нестеров]

Baoo,

Пробовал, но не помогло

"Не помогло" это очень плохое описание результата". Как именно пробовали? Что именно пошло не так?

[Baoo]

Александр Нестеров, пробовал то, что вы написали, добавлял

{% include 'registration/login.html' with form=form %}

Изменений не было, форма не отрисовывается

[Александр Нестеров]

Baoo, совет на будущее - если хотите получить ответ, приводите "минимально рабочий пример", .т.е. такое количество кода, чтобы отвечающий мог скопировать его себе и воспроизвести ошибку. При этом в приведенном коде не должно быть ничего, что не относится к проблеме.
Т.Е. в вашем случае это view, где вы вызываете шаблон, в котором находится модальное окно и сам шаблон (желательно, убрав код, который не относится к теме).
Навскидку, могу предположить, что вы не передаете в из view в шаблон (где вызывается модальное окно) класс формы , но это именно что догадка, т.к. в вакууме

{% include 'registration/login.html' with form=form %}

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

[Baoo]

Александр Нестеров, давайте зайдём с другого конца. Есть кнопка "Выйти", которая показывается, когда пользователь не авторизован. При нажатии на неё появляется модальное окно без форм, просто надпись.

Ссылка:

<li class="nav-item">
    <a class="nav-link" data-toggle="modal" data-target="#logoutModal">Выйти</a>
</li>

Модалка:

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                {% include 'registration/logged_out.html' %}
            </div>
        </div>
    </div>
</div>

Шаблон logged_out.html:

<h4 class="mb-3">Вы вышли из системы</h4>
<p><a class="link-underline link-underline-opacity-0 link-opacity-50-hover" href="{% url 'login' %}" data-toggle="modal" data-target="#loginModal">Войти</a></p>

При нажатии на ссылку, модальное окно появляется, шаблон в нём корректный:

Но фактического выхода из аккаунта не происходит, если обновить страницу, пользователь останется авторизованным.
Мне кажется, что природа этой проблемы схожа с изначальной

[Александр Нестеров]

Baoo,

Но фактического выхода из аккаунта не происходит, если обновить страницу, пользователь останется авторизованным.

<h4 class="mb-3">Вы вышли из системы</h4>
<p><a class="link-underline link-underline-opacity-0 link-opacity-50-hover" href="{% url 'login' %}" data-toggle="modal" data-target="#loginModal">Войти</a></p>

Мне кажется, что природа этой проблемы схожа с изначальной

А мне кажется, что природа этой проблемы - невнимательность. У вас ссылка - ведет по пути login, т.е. "войти"

[Baoo]

Александр Нестеров, это ссылка для того, чтобы можно было сразу после выхода снова войти, на скриншоте её видно, она не влияет на фактический выход из системы.

[Александр Нестеров]

Baoo,
Допустим. Но для выхода в любом нужно отправлять запрос на "logout" либо прямо перейдя по ссылке, либо с помощью js. Сам по себе вызов модального окна не приведет к этому.
Впрочем, вопрос в том, зачем вообще нужно открывать его после выхода?

[Baoo]

С помощью js

Похоже на то, что нужно отправлять запрос с помощью ajax, а ответ на него вставлять в модальное окно, спасибо за наводку

Answer 2

[Дмитрий]

{{ form.as_p }}

https://www.geeksforgeeks.org/form-as_p-render-dja...

Comments

[Baoo]

Спасибо за ответ, но, к сожалению, это не работает
Переменной form в принципе не существует в контексте шаблона, поэтому любые варианты отображения возвращают пустое множество