Ajax sends 2 POST requests...I don't have any live() event handlers
I want to send one of two async requests based on a click event (login and register). My click handler is sending 2 POST requests for each respective click (2 login requests, or 2 register requests). I know that event handlers created by the live method can cause this problem. The thing is, I don't have any in my script. I've replaced them with .delegate()
Here it is...
//ajax registration.
$('input#register_submit').click(function(event){
$.post("/register_async/", $('div#register_side form').serialize(),
function(data){
$.each(data,function(){
if(this.user_status==1){
$('#header-top').html('<ul><li>Hi,'+ this.user_fname + '  | </li><li><a href="">Log Out</a></li></ul>');
$('#post_login_modal').dialog("close");
$('input[name=preview]').unbind('click');
$('a.login').unbind('click');
$('li a.account').unbind('click');
}
else{
$('p#login_title').text('There are errors in your form').css("color","red");
//redirect upon failed registration
//window.location='{{site}}register';
}
});
}
,'json');
event.stopPropagation();
return false;
});
//ajax login...just for this page right now
$('input#login_submit_btn').click(function(event){
$.post("/login_async/", $('div#login_side form').serialize(),
function(data){
$.each(data,function(){
if(this.user_status==1){
$('#header-top').html('<ul><li>Hi,'+ this.user_fname + '  | </li><li><a href="">Log Out</a></li></ul>');
$('#post_login_modal').dialog("close");
$('a.login').unbind('click');
$('li a.account').unbind('click');
//specific to upload page. removes login/register modal window click handler
$('input[name=preview]').unbind('click');
$('#contact_btn').unbind('click');
$('#contact_btn').click(function(){
$('#contact_renter').dialog('open');
});
$('#save_btn').unbind('click');
$('#save_btn').click(function(){
$('#save_modal').dialog('open');
});
$('span.anon').unbind('click');
$('li.star_rater span.last').click(function(e){
$('#rate_modal').dialog('open');
e.stopPro开发者_如何学Gopagation();
$('#flag span').click(function(event){
$('#rate_modal').dialog('close');
$('#flag_modal').dialog('open');
event.stopPropagation();
});
//change rating/reporting, saving favorites, and contact based on ajax response
});
}
else{
$('p#login_title').text('That email/password is invalid').css("color","red");
}
//prevents user from saving post as favorite if he has already done so
if(this.user_favorite==1){
$('#stats li:eq(3)').remove();
$('<li><span id="saved">Saved<span></li>').appendTo('ul#stats');
};
//prevents user from rating/reporting more than once
if(this.flag_record==1){
$('.star_rater span.anon').remove();
$('<span class="voted"> Rated! </span>').appendTo('li.star_rater');
};
});
},'json');
return false;
});
To deal with closing all modal windows throughout my site, I also have this event handler:
$('body').delegate(".ui-widget-overlay","click", function(e) {
$("#rate_modal,#contact_renter,#save_modal, #login_modal,#post_login_modal,#flag_modal,#save_success,#flag_success,#mail_success,#rating_success,#delete_note").dialog("close");
e.stopPropagation();
});
I could have sworn, after I changed the live handler to delegate, it worked.
I don't know why I didn't think of this before. If those click handlers are attached to <input type="submit">
buttons, then you're submitting the forms twice: once for the click events, through AJAX, and again through the onsubmit events of the forms.
Change your .click()
functions to .submit()
and attach them to the form elements rather than the submit buttons.
$('form#form1').submit( function() {
// your existing code
return false;
}
Either that, or change those submit buttons into actual <button>
s, or <a>
s, or something.
精彩评论