I have a page with a login modal. When I click the login button, the modal appears with a form. When a user types in invalid credentials it posts an error as desired but when a user types valid credentials and I redirect the modal stays open. Even if I render another page the modal stays open.
我有一个登录模式的页面。单击登录按钮时,模式将显示一个表单。当用户键入无效凭据时,它会根据需要发布错误,但是当用户键入有效凭据并且我重定向模式时会保持打开状态。即使我渲染另一页,模态也会保持打开状态。
<!doctype html>
{% load staticfiles %}
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freelance Student</title>
<link rel="stylesheet" href="{% static 'css/normalize.css'%}">
<link rel="stylesheet" href="{% static 'css/style.css'%}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'css/jquery.remodal.css' %}">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="site-logo two">
<img src="{% static 'img/logo.png' %}" alt="">
</div>
<nav role="navigation" class="nav-collapse">
<ul class="site-nav">
<li><a href="#">Talent Search</a></li>
<li><a href="#">Employers</a></li>
<li><a href="#">About</a></li>
<li><a href="#modal">Login</a></li>
<li><a href="#modal2" class="button green">Create a profile</a></li>
</ul>
</nav>
<div class="remodal" data-remodal-id="modal">
<div class="login">
<div class="favicon"><img src="{% static 'img/favicon.png' %}" /></div>
<div class="login-iner">
<form id="login" action="" method="post">
{% csrf_token %}
{{login_form.as_p}}
<input type="submit" value="Login" />
</form>
</div>
<p>Forgot username/password? <span class="lspan"><a href="#">Click here</a></span></p>
</div>
</div>
<div class="remodal" data-remodal-id="modal2">
<div class="logot">
<div class="favicon"><img src="images/favicon.png" /></div>
<h1>Complete the form to build your profile</h1>
<div class="logot-iner">
<form>
<p>
My name is
<input type="text" placeholder="first name" />
<input type="text" placeholder="last name" />
and I am a <span class="type">
<input type="text" placeholder="student type" />
</span> Student
<br />
<br />
I am completing a <span class="type">
<input type="text" placeholder="degree type" />
</span> degree at<br />
<span class="type1">
<input type="text" placeholder="uni/college" />
</span>
<br />
<br />
I study/studied <span class="type2">
<input type="text" placeholder="degree subject" />
</span> and I
am currently in my <span class="type">
<input type="text" placeholder="select year" />
</span> year.
<br />
<br />
DOB: <span class="type3"><input type="text" placeholder="DD" /></span>
<span class="type3"><input type="text" placeholder="MM" /></span>
<span class="type3"><input type="text" placeholder="YYYY" /></span>
<br />
<br />
My primary skill area is <span class="type">
<input type="text" placeholder="skill area" />
</span> <br />
<br />
<span class="lspan1">You must be at least 18 years of age to join</span><br />
<br />
<input type="submit" value="Sign up" />
</p>
</form>
</div>
</div>
</div>
</div>
<!-- /.container -->
</header>
<!-- /.site-header -->
{% block content %} {% endblock %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{% static 'js/vendor/responsive-nav.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!--<script src="{% static 'js/base.js' %}"></script>-->
<script src="{% static 'js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery.remodal.js' %}"></script>
</body>
</html>
And my view:
我的观点是:
def index(request, show_login=False):
login_form = LoginForm()
if request.method == 'POST':
login_form = LoginForm(request.POST)
if login_form.is_valid():
email = request.POST.get("email", "")
password = request.POST.get("password", "")
user = authenticate(username=email, password=password)
if user is not None:
auth.login(request, user)
return redirect('/')
else:
return redirect('/')
else:
login_form.add_error(None, "No user found!")
return render(request, 'freelancestudent/general/index.html', {'login_form': login_form,
'show_login': show_login})
I tried to send a JsonResponse that would return {'status': 'true'} and or {'status': 'false'} based on whether a user had matched but when I did it would redirect the page to the returned string rather than get caught in the success method of my AJAX request
我尝试发送一个JsonResponse,它将返回{'status':'true'}和/或{'status':'false'},具体取决于用户是否匹配但是当我这样做时会将页面重定向到返回的字符串而不是而不是陷入我的AJAX请求的成功方法
$('document').ready(function(){
$('#login').click(function(){
$.ajax({
type: 'POST',
url: '#',
dataType: 'json',
success: function(data){
console.log(data)
}
})
})
})
Is an AJAX request the way to go?
AJAX请求是否可行?
1 个解决方案
#1
0
You should close yourself. From: https://github.com/VodkaBears/Remodal#methods Look at the inst.close(); method
你应该关闭自己。来自:https://github.com/VodkaBears/Remodal#methods查看inst.close();方法
#1
0
You should close yourself. From: https://github.com/VodkaBears/Remodal#methods Look at the inst.close(); method
你应该关闭自己。来自:https://github.com/VodkaBears/Remodal#methods查看inst.close();方法