Ajax form submitting multiple times. Sometimes - php

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;
}
}