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.

[Rails6.1] form actionにdata-remote="true"を追加する方法

Posted at

#form actionにdata-remote="true"が追加されない...
Rails6.1でユーザーフォローボタンなどを非同期通信で実装したい!
そんな時はform_withの中にremote: true を指定してあげれば非同期通信が簡単にできるらしい!

viewファイル
form_with(model: ..., remote: true)

これで実際に生成されるHTMLのform actionにdata-remote="true"が追加されて非同期通信ができるようになる!



はずが...



実際に生成されたHTML
<form action="http://localhost:3000/" accept-charset="UTF-8" method="post">

あれ? data-remote="true"が追加されてないぞ?

#解決策:form_withにlocal: falseを指定する
実は、Rails6.0を使用している場合は上記の方法で非同期通信に対応できたのですが、Rails6.1ではそうはいかないようです。

Rails6.1で非同期通信に対応させるためにはremote: tureではなくlocal: falseを指定してあげるようにしましょう。

viewファイル
form_with(model: ..., local: false)

すると...

実際に生成されたHTML
<form action="http://localhost:3000/" accept-charset="UTF-8" data-remote="true" method="post">

form actionにdata-remote="true"が追加され、非同期通信ができるようになりました!
Railsのバージョンによる細かな違いはきちんと把握しないといけませんね。

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?