0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

メッセージ送信の非同期化

Posted at

フォームが送信されたら、イベントが発火するようにしよう

スクリーンショット 2020-07-03 22.12.39.png この記述の解説をします。 $(*****)には、formのクラス名を記述します。 .on(*****,にはイベント名を記述します。 e.preventDefaulでは、非同期通信を行う為にデフォルトのイベントを止めています。 ##イベントが発火したときにAjaxを使用して、messages#createが動くようしましょう スクリーンショット 2020-07-03 22.17.55.png この記述の中のthisは、イベントの発火元であるFormの情報が入っています。 $(this).attr('action');は、Form情報のパスを取得しています。 # messagesコントローラーの#createアクションでメッセージを保存し、respond_toを使用してJSON形式のリクエストに対してのレスポンスを返せるようにしましょう スクリーンショット 2020-07-03 22.21.45.png if @message.save リクエストで送られてきた情報を保存している respond_to do |format| format.json json方式で返している ## その他アウトプット スクリーンショット 2020-07-03 22.25.20.png クラス名MessageFieldにappend(html)でHTMLを追加している ## $(".submit-btn").prop('disabled', false); 送信ボタンを一度押すとリロードしないと押せなくなるが prop('disabled', false);を送信ボタンクラスに記述する事によりロードせずに投稿ができる様になる ## 非同期に失敗した場合の処理 スクリーンショット 2020-07-03 22.31.17.png 失敗した場合エラーをアラートで知らせてくれます。 Doneの後に使います
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?