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>