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()を使わずに書けるので簡潔ですね！
