Question

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 + '&nbsp | </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 + '&nbsp | </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.stopPropagation();

                $('#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.

Answer 1

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.