Rails5.2.1(form_with) + javaScript(ajax:success) で 非同期処理

Rails5.2 form_with でフォームを作って非同期処理で成功時に表示を変更したい。

Rails5.2.1(form_with) + javaScript(ajax:success) で 非同期処理

html
<%= form_with model: [model object] , url: [path url(xxx_path, /xxx/xxx ... )], class: 'for_ajax'  do |f| %>
   <%= f.hidden_field :xxxxx %>
   <div class="form-group">
     <%= f.text_field :xxxx, class: 'form-control' %>
   </div>
   <%= f.submit "ボタン", class: 'btn' %>
<% end %>

上記のようなフォームを作成する。

  • form_with を使用する(デフォルトでremote:trueになっている -> ajax対応)
  • model: あればモデルのオブジェクトを指定
  • url: 処理URLを指定

controllerに処理を実装する。

ruby
def sample
  # 処理を書く
  render :json => 'success' #オブジェクトとかでもOK
end
  • 戻り値はrender :json => XXXXで返す

javaScriptを実装する。

javascript
$(document).on('ajax:success', '.for_ajax', function(e) {
  var data = e.detail[0];
  // 処理を書く
})
  • ajax:successでajax処理の結果を受け取る。
  • for_ajax  は非同期処理を実行したformのクラスを指定する
  • 戻り値はe.detailで取得

このような感じで実装すればOKです。

jQueryの$.ajax()を使わずに書けるので簡潔ですね!