Question

我试图在这里基于JS / Bootstrap创建一个登录/注册模式：

https://www.creative-tim.com/product/login-and-register-modal

我正在寻找指导，因为我在我的模态上显示表单输入时出现问题。点击后弹出的模态会很好，但表单输入没有出现。

如果我访问页面accounts / sign_in或accounts / sign_up并单击其中一个按钮，那么我会获得带有表单输入的弹出窗口（大部分）。

因此，我认为我必须在login_form视图中不正确地处理渲染。

我创建了这个＆＃39; login_form＆＃39;按照一些指导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)

和我的网址：

//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 ); 
}

--------------更新视图---------------

如果我点击Login：

，这就是主页上的样子

如果我转到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

Answer 1

问题在于您将work_mem功能附加到def login_form(request):，sig_in视图，而不是在主页中添加，它应该按预期工作

sign_up

正如您已经将视图url(r'^$', views.login_form, name='')添加到上下文中一样：

home

Django Modal用户登录/注册 - 表格渲染问题

1 个答案: