stimulus.jsからのturbo_frameリクエストを送信する方法

はじめに

JavaScriptでTurboFrameリクエストを行う方法がわかったので共有します。

問題

'modal'という名のturbo_frame_tagにJavaScriptで'/modals/pop_ups'というリクエストを行いたい場合は通常のlink_toタグなどでのリクエスト送信ができない。

解決方法

sendTurboRequestToPopUpModal = () => {
    // turbo_frame_tag 'modal'を示している
    // turbo_frame_tagは指定した属性と同名のidが付与されるため
    const frame = document.getElementById('modal')
    // turbo_frame_tagはsrc属性を付与するだけでその部分を指定のURLに置換する原理があるため、この処理だけでmodalが開く
    frame.src = '/modals/pop_ups'
  }

turbo_frame_tagはsrc属性に設定されたURLに中身を書き換えるという特性を持つ。
そのためsrc属性にリクエストを付与するだけでリクエストを送信することができる。

おわりに

この特性を活かせばtubo_frame_tagの使用方法の自由度が上がるので、turbo_frameでよく開発する私にとっては有益な情報でした。
同じようにRails7のHotwireで開発している方にとって有益な情報になれば幸いです。