【非同期通信実装備忘録①】preventDefaultで止めたイベントは止めっぱなしにしてはいけない。

TECH::EXPERTに通い始めてちょうど一ヶ月。初めてコネクトを利用し、メンターさんに質問をしました。筋道立てて話すのが苦手＆途中で話が崩壊しそうだと思い笑、状況と質問したいことを事前に紙に書き出したのですが、頭が整理できていいなと思いました。今後もエラーが出た時は、ウンウン悩むだけでなく、紙に状況を書き出してみよう。

そしてエラーは一瞬で解決…

以下のようなチャットアプリを作成しており、

メッセージ送信機能の非同期通信の実装をしていました。

が！連続して投稿できない。

投稿後、また文字を入力して「send」ボタンをクリックしても何も起こらない…

非同期通信の処理に関して、jQueryでこのように書いていました（一部省略）。

$('#new_message').on('submit', function(e){
e.preventDefault();

…省略…

　$.ajax({
　非同期通信のオプションを定義
　})

　.done(function(data){

…省略（非同期通信成功時の処理）…

　$('.text-message').val('')　　// テキストの入力欄をリセット
})
　.fail(function(){
　alert('error');
　})

});

エラーの原因

→preventDefault();でフォームのsubmitイベントを止めて非同期通信を行なっていたが、イベント再開の処理を記述していなかったため。

投稿後の「send」ボタンの状態を検証画面で確認してみると、「disabled」属性が付いていました。input要素が無効になってしまっています。

sendボタンのHTML情報

解決法

→　.done(function(){ }内に、submitイベントを再開させるコードを書く。

.done(function(data){

…省略（非同期通信成功時の処理）…

　$('.text-message').val('')　　// テキストの入力欄をリセット

$('.chat-content__form-submit').attr('disabled', false);　 //追加！
})

これで連続投稿ができるようになりました。投稿後の「send」ボタンを検証してみると…

「disabled」属性が付いていないことが確認できます。

つらつらと書いてきましたが、重要な学びは以下の２点です。

☆preventDefault();でイベントを中断させた場合、保存完了後の処理の中にイベントを再開させるコードを記述する。

☆エラーかな？と思ったら検証画面もよく確認する。自分がテキスト上に書いたコード以外の情報が分かる。

正確且つ見やすい、無駄のないコードを書くに至るには道のりは長いですが…千里の道も一歩から、頑張ります・・・。

いそべやきはビールの夢をみる

今日もしがないえんじにあ

【非同期通信実装備忘録①】preventDefaultで止めたイベントは止めっぱなしにしてはいけない。