我正在尝试基于JS / Bootstrap创建一个登录/注册模式:
https://www.creative-tim.com/product/login-and-register-modal
我正在寻找指导,因为我在我的模态上显示表单输入时遇到问题。点击后弹出的模态会很好,但表单输入没有出现。
如果我访问页面accounts / sign_in或accounts / sign_up并单击其中一个按钮,那么我会获得带有表单输入的弹出窗口(大部分)。
因此,我认为我必须在login_form视图中不正确地处理渲染。
我按照一些指导from this post here创建了这个'login_form'视图
//views.py
def login_form(request):
signup_form = UserCreationForm()
login_form = AuthenticationForm()
context = {"signup_form": signup_form, "login_form": login_form}
return render(request, 'layout2.html', context)
和我的网址:
//urls.py
app_name = "accounts"
urlpatterns = [
url(r'sign_in/$', views.login_form, name='sign_in'),
url(r'sign_up/$', views.login_form, name='sign_up'),
这是我的layout2.html文件中的相关模态代码:
<div class="form loginBox">
<form method="POST" action="{% url 'accounts:sign_in' %}">
{% csrf_token %}
<input type="hidden" name="form_name" value="login_form">
{{ login_form.as_p }}
<input type="submit" onclick="loginAjax()">
</form>
</div>
</div>
</div>
<div class="box">
<div class="content registerBox" style="display:none;">
<div class="form">
<form method="POST" action="{% url 'accounts:sign_up' %}" html="{:multipart=>true}" data-remote="true" accept-charset="UTF-8">
{% csrf_token %}
<input type="hidden" name="form_name" value="signup_form">
{{ signup_form.as_p }}
<input type="submit" onclick="loginAjax()">
</form>
</div>
不确定这是否与我的问题有任何关系,但以防万一这是JS处理模式弹出窗口:
/*
*
* login-register modal
* Autor: Creative Tim
* Web-autor: creative.tim
* Web script: http://creative-tim.com
*
*/
function showRegisterForm(){
$('.loginBox').fadeOut('fast',function(){
$('.registerBox').fadeIn('fast');
$('.login-footer').fadeOut('fast',function(){
$('.register-footer').fadeIn('fast');
});
$('.modal-title').html('Register with');
});
$('.error').removeClass('alert alert-danger').html('');
}
function showLoginForm(){
$('#loginModal .registerBox').fadeOut('fast',function(){
$('.loginBox').fadeIn('fast');
$('.register-footer').fadeOut('fast',function(){
$('.login-footer').fadeIn('fast');
});
$('.modal-title').html('Login with');
});
$('.error').removeClass('alert alert-danger').html('');
}
function openLoginModal(){
showLoginForm();
setTimeout(function(){
$('#loginModal').modal('show');
}, 230);
}
function openRegisterModal(){
showRegisterForm();
setTimeout(function(){
$('#loginModal').modal('show');
}, 230);
}
function loginAjax(){
/* Remove this comments when moving to server
$.post( "/login", function( data ) {
if(data == 1){
window.location.replace("/home");
} else {
shakeModal();
}
});
*/
/* Simulate error message from the server */
shakeModal();
}
function shakeModal(){
$('#loginModal .modal-dialog').addClass('shake');
$('.error').addClass('alert alert-danger').html("Invalid email/password combination");
$('input[type="password"]').val('');
setTimeout( function(){
$('#loginModal .modal-dialog').removeClass('shake');
}, 1000 );
}
--------------观看更新---------------
如果我点击登录,这就是主页上的样子:
如果我转到accounts / sign_in并单击sign_in按钮,这就是它的样子:
更新这是我更新的主页视图
class Home(generic.TemplateView):
model = Deal
template_name = 'test.html'
def get_context_data(self, **kwargs):
context = super(Home, self).get_context_data(**kwargs)
today = datetime.datetime.today()
deals = Deal.objects.all()
context['deals'] = deals.filter(Q(date_expires__gte=today))
categories = Category.objects.all()
context['categories'] = categories
signup_form = UserCreationForm()
login_form = AuthenticationForm()
context["signup_form"] = signup_form
context["login_form"] = login_form
return context
问题是你将def login_form(request):
函数附加到sig_in
,sign_up
视图而不是在主页中添加,它应该按预期工作
url(r'^$', views.login_form, name='')
正如你已经有了视图home
只是添加到上下文中:
signup_form = UserCreationForm()
login_form = AuthenticationForm()
context["signup_form"] = signup_form
context["login_form"] = login_form