Ajax form submitting multiple times. Sometimes

Question

I am using Malsup's AJax form plugin.

What I have going is a "chat" page, basically a div that is being refreshed every 2 seconds, and refresh when the user submits something to the chat window.

Rough HTML layout of page:

   <div id='refresh_openmsg'>
    <div id='chatdiv'>Chat window here</div>
   </div>

   <div id='reply_block'> 
    <form id='send_msg_form'>Basic form goes here</form>
   </div>

JS:

//create timer to refresh chat window every 2 seconds

    <script type='text/javascript'>
    $(document).ready(function() {
     refresh_openmsg = setInterval(function (){$('#refresh_openmsg').load('messaging.php?view='+the_page+' #refresh_openmsg');}, 2000);
    });
    </script>

    //This is what happens when the form is submitted

    <script type='text/javascript'>
    $(document).ready(function() { 
        var options = { 
            target:        '',
            dataType:      'html',
            beforeSubmit:  showRequest_sendmsg,     
            success:       showResponse_sendmsg
        }; 
        $('#send_msg_form').live('submit', function() {
            $(this).ajaxSubmit(options); 
            return false;
        });
    });
    function showRequest_sendmsg(formData, jqForm, options) { 
        return true; 
    }
    function showResponse_sendmsg(responseText, statusText, xhr, $form)  {
        $("#reply_block").load('messaging.php?view='+the_page+' #reply_block', function() { 
         $('#reply_area').focus();
         $("#refresh_openmsg").load('messaging.php?view='+the_page+' #refresh_openmsg', function() {
           $("html, body").animate({ scrollTop: $(document).height() }, 500);           
         });
        }).focus();
    }
    </script>

//on showResponse, I'm reloading the #reply_block div, and reloading the #refresh_openmsg div (#refresh_openmsg div is also being reloaded every 2 seconds)

The issue I'm running into is that the form is being submitted multiple times, sometimes twice, sometimes 3 times, and sometimes 4 or 5. Very strange, i've built similar pages before and have never ran into this issue. I know it's something with my code, and the never ending refreshes, but that's my only option at the moment. Anyone see a problem with this?

I've tried putting .die() before the .live event when submitting the form but that did not fix the issue.

Answer 1

You are reloading reply block div which is causing this piece to be triggered, hence after every load one more listener is getting added

$('#send_msg_form').live('submit', function() {
            $(this).ajaxSubmit(options); 
            return false;
        });

you can try using like this:

$('#send_msg_form').live('submit', replyBlockDivLoaderHandler);
function replyBlockDivLoaderHandler(event){
   if(event.handled != true){
      $(this).ajaxSubmit(options); 
      event.handled = true;
   }
}