Javascript 无法在模式对话框中显示窗体
我在模式窗口内显示密码更改时遇到问题 我可以看到模式窗口，但我看不到对Javascript 无法在模式对话框中显示窗体,javascript,html,django,django-2.0,Javascript,Html,Django,Django 2.0,我在模式窗口内显示密码更改时遇到问题 我可以看到模式窗口，但我看不到对def change\u password的调用，尽管我在模式窗口的操作中提到了它 Views.py def change_password(request): if request.method == 'POST': form = PasswordChangeForm(request.user, request.POST) if form.is_valid():
def change\u password操作中提到了它
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">×</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>
&时代；
修改密码
{%csrf_令牌%}
{{form}}
接近
模板：
{% extends 'base.html'%}
<h1>Hello From Change Password</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Save changes</button>
</form>
{%extends'base.html%}
您好，请更改密码
{%csrf_令牌%}
{{form.as_p}}
保存更改
这是我如何称呼模态的：
{% 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">×</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>
{%load staticfiles%}
修改密码
&时代；
修改密码
拯救
接近
{%block content%}{%endblock%}
window.jQuery | | document.write（“”）
我想问题在于莫代尔表单中缺少提交按钮，除非您通过JS提交表单
编辑：通过添加上下文处理器，为基本模板中的PasswordChangeForm
实例的可访问性问题添加了解决方法。
我在我的应用程序文件夹中创建了文件context\u processors.py
（在您的情况下是usermgmt
），新的上下文处理器名为password\u form
（您可以自由使用任何名称，只需确保在settings.py
，更多详细信息）：
然后，我在coresettings.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_表单
，包括base.html
。我根据您的代码（注释）计算出了base.html
的以下模态部分：
&时代；
修改密码
{%csrf_令牌%}
{{pwd_form}}
拯救
接近
我添加了保存。它在模式对话框中显示Save
按钮，但不显示窗体。@Asdfg好的，您能提供有关如何调用模式的更多详细信息吗？“模态对话框”下的代码实际位于何处（在哪个文件中）？在没有回答上述问题的情况下，我猜测您在某个页面（不更改密码页面）上显示此模式，其中没有表单模板变量，或者您的模式代码位于模板之外的某个位置（可能在某些.js文件中）因此无法访问模板变量form
@Asdfg，我想您应该看看。如果你不想办法，我今天晚些时候再做谢谢。感谢您的帮助。您正在显示两个不同的模态，一个没有{{form}
，另一个有{{form}
。
'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'
],
},
<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">×</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>