Невозможно отобразить форму внутри модального диалога

У меня проблемы с отображением смены пароля из модального окна.

Я вижу модальное окно, но не вижу звонка def change_password хотя я упоминал об этом в action моего модального.

Views.py

def change_password(request):
    if request.method == 'POST':
        form = PasswordChangeForm(request.user, request.POST)
        if form.is_valid():
            user = form.save()
            update_session_auth_hash(request, user)  # Important!
            messages.success(request, 'Your password was successfully updated!')
            return redirect('change_password')
        else:
            messages.error(request, 'Please correct the error below.')
    else:
        form = PasswordChangeForm(request.user)
    return render(request, 'usermgmt/change-password.html', {
        'form': form
    })

модальный диалог:

<div id="passwordChangeModal" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Change Password</h4>
      </div>
      <div class="modal-body">
          <form action="{% url 'usermgmt:change_password_page' %}" method="post" id="changepassword" class="form">
              {% csrf_token %}
          {{ form }}
          </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>


</div>

шаблон:

{% extends 'base.html'%}
<h1>Hello From Change Password</h1>
<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">Save changes</button>
</form>

Вот как я называю модальное:

{% load staticfiles %}

<!doctype html>
<html class="no-js" lang="">

<head>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/main.css'%}">
    <script src="{% static 'js/vendor/modernizr-2.8.3-respond-1.4.2.min.js' %}"></script>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div id="navbar" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right" role="form">
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#passwordChangeModal">Change Password</button>
                </form>

            </div>
        </div>
    </nav>


    <div id="passwordChangeModal" class="modal fade" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="{% url 'usermgmt:change_password_page' %}">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">Save</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>


    </div>


    <div class="container">
        {% block content %} {% endblock %}
    </div>
    <!-- /container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
</body>

</html>
Источник

1 ответ

Я полагаю, что проблема заключается в отсутствии кнопки отправки в модальной форме, если вы не отправите эту форму через JS.

РЕДАКТИРОВАТЬ: добавил решение вашей проблемы с доступностью PasswordChangeForm экземпляр в вашем базовом шаблоне с помощью добавления контекстного процессора.
Я создал файл context_processors.py в папке моего приложения (в вашем случае это usermgmt) с новым контекстным процессором password_form (вы можете использовать любое имя, просто отразите это изменение также в settings.py, подробнее подробнее):

from django.contrib.auth.forms import PasswordChangeForm


def password_form(request):
    return {
        'pwd_form': PasswordChangeForm(request.user),
    }

Затем я вставил строку в ядро settings.py Раздел TEMPLATES/OPTIONS/context_processors, так что теперь это выглядит так:

'OPTIONS': {
    'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
        'usermgmt.context_processors.password_form'
    ],
},

Теперь вы можете использовать pwd_form в любом шаблоне, включая ваш base.html, Я разработал следующий модальный раздел base.htmlна основе вашего кода (обратите внимание на комментарии):

<div id="passwordChangeModal" class="modal fade" role="dialog">
    <div class="modal-dialog" role="document"> <!-- without this div I wasn't able to close opened modal -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="{% url 'change_password' %}" class="form">
                    {% csrf_token %}
                    {{ pwd_form }}
                    <button type="submit" class="btn btn-default">Save</button> <!-- note lack of data-dismiss="modal" - with this attr set I wasn't able to submit form as modal just got closed all the time - probably because of the precedence of modal-related attrs, but I couldn't find any docs regarding this behaviour -->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
Источник
Другие вопросы по тегам