2

Malsup の AJax フォーム プラグインを使用しています。

私が行っているのは「チャット」ページで、基本的には 2 秒ごとに更新される div であり、ユーザーがチャット ウィンドウに何かを送信すると更新されます。

ページの大まかな HTML レイアウト:

   <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)

私が直面している問題は、フォームが複数回、時には 2 回、時には 3 回、時には 4 回または 5 回送信されていることです。私はそれが私のコードに何かがあることを知っており、終わりのない更新が行われますが、現時点ではそれが私の唯一のオプションです。誰でもこれに問題がありますか？

フォームを送信するときに .live イベントの前に .die() を入れてみましたが、問題は解決しませんでした。

4

1 に答える 1

0

この部分がトリガーされる原因となっている応答ブロック div をリロードしているため、ロードのたびにもう 1 つのリスナーが追加されます。

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

次のように使用してみることができます:

$('#send_msg_form').live('submit', replyBlockDivLoaderHandler);
function replyBlockDivLoaderHandler(event){
   if(event.handled != true){
      $(this).ajaxSubmit(options); 
      event.handled = true;
   }
}
于 2012-05-18T17:36:02.970 に答える