この広告は、90日以上更新していないブログに表示しています。
pulldown変更時に非同期更新したいというのは割とよくある話だと思いますが、以前似たような実装をしたことがあるのですが、その時にはRailsで生成したformのsubmit方法がいまいちわからずStimulus(js)でsubmitするということをやってました。
submitは、rails-ujs
のRails.fire
を使ってるので、今後推奨されないですね。
そもそも、onChange時にsubmitしたいだけなのにjsのファイル追加してるのは微妙だなぁと思いながら書いていた記憶があります。
例として書籍を表示する画面で、有効か無効かを選択できるプルダウン実装について記載します。
更新対象のhtmlをpartial化します。
(turbo_streamを直接viewに書く方法をとれば、必須ではないです。個人的にはわかりやすいのでpartila化しています。)
td = renderpartial:"active",locals: {book:@book }
partial。
/# locals: (book:)= turbo_frame_tag "active" do = form_with model: book do |f| = f.select :active, [['true', true], ['false', false]], { selected: book.active }, onChange: "this.form.requestSubmit();"
更新部分をturbo_frame_tag
でくくります。onChangeでrequestSubmit()
を呼んでいるのもポイントです。
あと、昨日紹介したStrict Localsも便利で良いです。(RailsのStrict Localsをslimで使う )
こちらで、submit()
はトリガーしないけど、requestSubmit ()
はするみたいな話が載ってます。
ruby on rails 5 - How can I submit a form on input change with Turbo Streams? - Stack Overflow
確かに、以前は form.submit() が動かずに仕方なくRails.fire していました。
あとは、turbo_streamで置き換えれば良いです。以下のようにcontrollerでやっても良いですし、edit.turbo_stream.slim というようなturbo stream用のviewを用意して、実施しても良いです。
defupdate@book =Book.find(params[:id])if@book.update(book_params) renderturbo_stream: turbo_stream.replace("active",partial:"active",locals: {book:@book })else renderjson:@book.errors,status::unprocessable_entityendend
引用をストックしました
引用するにはまずログインしてください
引用をストックできませんでした。再度お試しください
限定公開記事のため引用できません。