用于用户登录/注册的Django Modal-表单渲染问题 [英] Django Modal For User Login/Register - Form Render Issue
问题描述
我正在尝试根据此处的JS/Bootstrap创建登录/注册模式:
这是我进入帐户/登录并单击登录按钮时的外观:
更新这是我更新后的主视图，其中已添加
class Home(generic.TemplateView):型号=交易template_name ='test.html'def get_context_data(self，** kwargs):context =超级(首页，自我).get_context_data(** kwargs)今天= datetime.datetime.today()Deals = Deal.objects.all()context ['deals'] = Deals.filter(Q(date_expires__gte = today))类别= Category.objects.all()context ['categories'] =类别signup_form = UserCreationForm()login_form = AuthenticationForm()context ["signup_form"] = signup_formcontext ["login_form"] = login_form返回上下文 问题是您将 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_formcontext ["login_form"] = login_form I'm trying to create a login/register modal based on the JS/Bootstrap here:
https://www.creative-tim.com/product/login-and-register-modal
I'm just looking for guidance as I'm having an issue displaying the form inputs on my modal. The modals will pop up fine upon click, yet the form inputs are not appearing.
If i visit the page accounts/sign_in or accounts/sign_up and click on one of the buttons, then i do get the popup with the form inputs (for the most part).
Thus, i think i must be improperly handling the render in my login_form view.
I created this 'login_form' view following some guidance from this post here
//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)
and my url's:
//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'),
this is the relevant modal code in my layout2.html file:
<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>
Not sure if this is relevant to my issue in any way, but just in case here is JS handling modal pop ups:
/*
*
* 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 );
}
--------------UPDATE ON VIEW---------------
Here is what it looks like on homepage if i click on Login:
And this is what it looks like if i go to accounts/sign_in and click on sign_in button:
UPDATE Here is my updatd Home view with added
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
The problem is that you are attaching your def login_form(request): function to the sig_in, sign_up view and not in the home page just add and it should work as you expect
url(r'^$', views.login_form, name='')
As you already had the view home just add into the context:
signup_form = UserCreationForm()
login_form = AuthenticationForm()
context["signup_form"] = signup_form
context["login_form"] = login_form
这篇关于用于用户登录/注册的Django Modal-表单渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
