代码之家 › 专栏 › 技术社区 › Asdfg

无法在模式对话框中显示窗体

django-2.0 django html javascript

0

Asdfg · 技术社区 · 7 年前

我可以看到模态窗口,但我看不到调用发生在 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 回复 | 直到 7 年前

1

0

Roman Yakubovich 7 年前

我想问题在于modal的表单中缺少submit按钮,除非您通过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\u 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>