0

I'm building my first web page (Django 1.5, Python 2.7, Fancybox 2), so I'm not really sure where I'm going wrong as I'm learning a bunch of things at once.

I want my user to be able to login or register through a pop-up Fancybox modal. I've got that all working great, but I need to process errors (e.g., the user leaves a field blank). I want to make the modal re-render with an error message, but I'm not really sure how to structure that. Here's what I have so far:

views.py

def base(request):
    if request.method == "GET":
        return render_to_response("base.html", {}, RequestContext(request))
    else:
        response_dict = {'error' : None}
        if "login" in request.POST:
            email = request.POST.get('email', False)
            password = request.POST.get('password', False)
            if email and password:
                user = authenticate(username=email, password=password)
                response_dict.update({'email':email, 'password':password})
                if user:
                    name = "{0} {1}.".format(user.first_name, user.last_name[0])
                    print name
                else:
                    response_dict['error'] = "No user found with that email/password."
            else:
                response_dict['error'] = "Please fill out all fields."
            if response_dict['error']: //seems like something is missing here?
                render_to_response("base.html", {'error_message':response_dict['error']}, RequestContext(request))

base.js

$("#login_fancy").fancybox({
    'scrolling' : true,
    helpers : {
        title : null
    }

});

    $("#login_form").bind("submit", function(){ //this is all clearly wrong, as it never gets called--I can comment out the whole thing with no change
        console.log("login submitted");
        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            url: "/login/",
            data: $(this).serializeArray(),
            success: function(data){
                $.fancybox(data);
            } 


        });
        return false;

    });

html

    <div id="login">
        <a id="login_fancy" title="Login" href="#login_form">Login</a> or <a id="newuser_fancy" title="Newuser" href="#newuser_form">Register</a>
    </div>
<div style="display:none">
    {% if form.errors %}
        <p class="error">{{ error_message }}
    {% endif %}

    <form id="login_form" action=""  method="POST">
      {% csrf_token %}

        <label for="email">Email:</label>
        <input type="text" name="email" value="" id="email">
        <label for="password">Password:</label>
        <input type="password" name="password" value="" id="password">
        <input type="submit" name="login" value="Log In" />
    </form>
</div>
4

1 回答 1

0

您的 JS 需要包含在document.ready处理程序中。

您的提交处理程序永远不会被注册，因为此时页面上不存在表单。

您应该改用$.onordocument.ready处理程序。

然后，在您的 ajas 处理程序中，您可以添加逻辑以在表单中显示验证错误。

于 2013-09-11T21:25:16.527 回答