ajaxの戻り値を、div要素に表示したい。

やりたいこと

ajaxの戻り値を、div要素で表示したい

困っていること

div要素に、一瞬だけ要素が表示されますが、直ぐに消えてしまう。

コード

javascript
1<script>
2  $('form').submit(function(){
3    var comment = $('input[name="comment"]').val();
4    $.ajax({
5      url :'index',
6      type:'post',
7      data:{'comment':comment,_token:'{{csrf_token()}}'},
8    }).done(function(item){ $('div').text(item.comment);
9    });
10  });
11</script>
12
13<div></div>

上記のコード中の$('div').text(item.comment);なのですが、ajaxの戻り値を、div要素に表示させているのですが、表示は一瞬だけで、直ぐに真っ白になります。表示後に上書きされてしまうのでしょうか？

表示が消えないようにするには、どうしたらいいのでしょうか？

行動規範の内容に同意します

回答3件

ベストアンサー

javascript
1$('form').on('submit',function(e){
2e.preventDefault();

としてください

投稿2019/06/25 09:25

yambejp

総合スコア114843

old_dog

2019/06/26 07:33 編集

ありがとうございました。期待した通りに動くようになりました。感謝です。以下はyambejp様、kei344様と同様のコメントになります。 return false と preventDefault()は、どちらも期待通りの動きを実現できました。ベストアンサーをどちらにしたらいいのか、とても悩みましたが、preventDefault()を調べて、いろいろと学習できましたので、学習機会を頂けましたyambejp様に致しました。 <jqueryの場合> return falseは、要素イベント、親要素への伝播をキャンセル、preventDefault()は、要素イベントの発生を防止、親要素への伝播は生かす、stopPropagation()は要素イベントは発生させ、親要素への伝播を停止。とのことでした。 <javascriptの場合> return false と preventDefault()は、要素イベントは無効、親要素への伝播は実行と、同じ効果のようでした。（参考）https://www.tam-tam.co.jp/tipsnote/javascript/post5050.html （参考）https://boukenki.info/javascript-return-false-imi-tukaikata/ jqueryとjavascriptの使い方の違いがあるようです。伝播をきれいに除去したければ、jqueryでreturn falseがいいのでしょうね。皆様、本当にありがとうございました。

行動規範の内容に同意します

submitを止めていないからでは。

js
1  $('form').submit(function(){
2    var comment = $('input[name="comment"]').val();
3    $.ajax({
4      url :'index',
5      type:'post',
6      data:{'comment':comment,_token:'{{csrf_token()}}'},
7    }).done(function(item){ $('div').text(item.comment);
8    });
9    return false; // コレを追加してみてください。
10  });