質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

解決済

ajaxでの二重送信

karirin3948
karirin3948

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

2回答

0グッド

0クリップ

228閲覧

投稿2022/12/09 01:45

編集2022/12/09 04:39

起きている現象

メッセージ送信を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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

htmlが無いのでなんとも言えませんがmessage_addクラスが複数あるとかそういうレベルのはなしでは?

追記

シンプルな例でテストしてみる

javascript

1<script> 2$(function(){ 3 $(document).on('click', ".message_btn", function() { 4 $.ajax({ 5 url: '/ajax_message_process', 6 }).done(function(data) { 7 console.log(data); 8 }); 9 }); 10}); 11</script>

投稿2022/12/09 04:22

編集2022/12/09 04:52
yambejp

総合スコア108937

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

karirin3948

2022/12/09 04:41

ご回答ありがとうございます! すみません、htmlを追記しました。 message_addクラスは1つだけ記述しています。また、検証モードで確認したところajax通信が二重で実行されていました。
yambejp

2022/12/09 04:53 編集

ソースを見る限りajaxは1度しか呼んでないようなので追記したようなシンプルな例で2度飛ばないことを確認しつつ、必要な項目を追加していってみては?

0

ベストアンサー

js

1$(document).on('click', ".message_btn", function() {

セレクタ(".message_btn")が一意ではない為、
document全体に対して "message_btn" class がclickされたときに動作する為
htmlを見ると message_btn class が div と button の2つに反応している、ということではないでしょうか。

私の環境ではbutton タグの message_btn class を削除したら1度だけ送信されるようになりました。

html

1変更前 <button class="btn btn-outline-primary message_btn" name="post" value="post" id="post">送信</button> 2変更後 <button class="btn btn-outline-primary" name="post" value="post" id="post">送信</button>

htmlが変更できない場合はjs側のセレクタを一意になるように調整するのは如何でしょうか

投稿2022/12/12 00:24

odataiki

総合スコア844

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。