Sending ajax form reloads page instead of sending request
I'm struggling to create a shoutbox for django. Everything works fine now concerning reading data from the database, but when I want to add a new shout the whole page is being reloaded, and from what I was able to check - form's action remains the same, and there is no request sent to function under specified url. What am I doing wrong here ?
HTML :
<div id="shoutbox">
<form method="post" id="form" class="shoutbox-form">
<table>
<tr>
<td><label>User</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
</tr>
<tr>
<td><label>Message</label></td>
<td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td>
</tr>
<tr>
<td></td>
<td><input id="send-shout" type="submit" value="Dodaj!" /></td>
</tr>
</table>
</form>
<div id="shoutbox-container">
<span class="clear"></span>
<div class="shoutbox">
<div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div>
<ul>
</ul>
</div>
</div>
</div>
jQuery :
$(document).ready(function(){
var inputUser = $("#nick");
var inputMessage = $("#shout");
var loading = $("#shoutbox-loading");
var messageList = $(".shoutbox > ul");
function updateShoutbox(){
messageList.hide();
loading.fadeIn();
$.ajax({
type: "POST",
url: "/shouts/",
data: "action=refresh",
dataType: "json",
success: function(data){
loading.fadeOut();
var c = data["response"];
messageList.html(c);
messageList.fadeIn(2000);
}
});
}
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
updateShoutbox();
$("#shoutbox-form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
$("#send-shout").attr({ disabled:true, value:"Sending..." });
$("#send-shout").blur();
$.ajax({
type: "POST",
async: true,
url: "/shouts/",
data: "action=insert&user=" + nick + "&message=" + mes开发者_运维问答sage,
//data: {"action" : "insert", "user": user, "message": message},
dataType: "json",
complete: function(data){
var c = data["response"];
messageList.html(c);
updateShoutbox();
$("#send-shout").attr({ disabled:false, value:"Shout!" });
}
});
}
else alert("All fields needed!");
return false;
});
});
My url :
url(r'^shouts/?$', "shoutbox"),
And function :
def shoutbox(request, user=None, message=None):
response = ""
if not request.POST.get("action"):
return HttpResponseRedirect('/')
else:
req = request.POST.get("action")
if req == "insert":
response = shoutbox_add(message, user)
elif req == "refresh":
response = shoutbox_get(20)
if request.is_ajax():
result = simplejson.dumps({
'response': response
}, cls=LazyEncoder)
return HttpResponse(result, mimetype='application/javascript')
Your form has id 'form' and class 'shoutbox-form', so your selector should be
$("#form").submit(function(){
or
$(".shoutbox-form").submit(function(){
精彩评论