起きている現象
メッセージ送信をajax通信で組んだのですが、送信する際に重複して実行されてしまいます。
確認したこと
こちらのサイトを参考に修正したのですが、
重複実行を回避することができませんでした。
https://cpoint-lab.co.jp/article/201802/1445/
ソースコード
match.js
1// メッセージを送信したとき 2$(document).on('click', ".message_btn", function() { 3 $.ajaxSetup({ 4 headers: { 5 "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), 6 }, 7 }); 8 var current_user_id= $('.current_user_id').val(), 9 user_id = $('.destination_user_id').val(), 10 text = $('#message_counter').val(), 11 current_user_img = $('.image').val(), 12 date=new Date(), 13 h = date.getHours(), 14 mi = date.getMinutes(), 15 hh = ('0' + h).slice(-2), 16 mmi = ('0' + mi).slice(-2), 17 day = hh + ':' + mmi; 18 var jqxhr; 19 if (jqxhr) { 20 return; 21 } 22 jqxhr = $.ajax({ 23 type: 'POST', 24 url: '/ajax_message_process', 25 dataType: 'text', 26 data: { 27 current_user_id: current_user_id, 28 user_id: user_id, 29 text: text 30 } 31 }).done(function() { 32 $('.message_add').replaceWith('<div class="my_message"><div class="mycomment right"><span class="message_created_at"> '+ day +' </span><p>'+text+'</p><img src='+current_user_img+' class="message_user_img"></div></div><input type="hidden" class="message_add">'); 33 $('#message_counter').val(''); 34 $('html, body').scrollTop($(document).height()); 35 }).fail(function() {}); 36});
html
1<input type="hidden" class="message_add"> 2 <div class="message_process" style="margin-bottom: 2rem;"> 3 <div class="message_text"> 4 <textarea id="message_counter" class="textarea form-control" placeholder="メッセージを入力ください" name="text"></textarea> 5 <div class="counter"> 6 <span class="message_count">0</span><span>/300</span> 7 </div> 8 <input type="hidden" class="destination_user_id" name="destination_user_id" value="{{$destination_user->id}}"> 9 <input type="hidden" class="current_user_id" name="current_user_id" value="{{$current_user->id}}"> 10 <input type="hidden" class="image" name="image" value="{{asset($current_user->image)}}"> 11 </div> 12 <div class="message_btn"> 13 <div class="message_image"> 14 <label> 15 <i class="far fa-image"></i> 16 <input type="file" name="image" id="my_image" accept="image/*" multiple> 17 </label> 18 </div> 19 <button class="btn btn-outline-primary message_btn" name="post" value="post" id="post">送信</button> 20 </div> 21 <div class="message_image_detail"> 22 <div><img class="my_preview"></div> 23 <i class="far fa-times-circle my_clear"></i> 24 </div> 25 </div>
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/09 04:41
2022/12/09 04:53 編集