Ruby on Rails5.2でAjaxを使ったformの使い方

Ruby on Railsのバナー

Railsのバージョン5.2.0

バージョン5.1からformに使うのがform_tagform_forからform_withに統一された。ということでRubyのような頻繁に更新が続けられている言語には細かなメモが必要ということでメモを残しておきます。

form_withでは何も指定なしでformを作ると非同期通信(ajax)がデフォルトで使用されるようになっているそうです。

Ruby on Rails 5.2.0のform_withを使った書き方

app/views/*****/index.html.erb

<% form_with do |form| %>

<% form.text_field title %>

<% form submit “submit” %>

Ruby on Rails 5.1以前のform_tagを使った書き方

app/views/*****/index.html.erb

<% form_tag(action => ‘index’), :remote => true) do |form| %>

<% text_field_tag :title %>

<% submit_tag “submit” %>

違い

5.1以前 form_tag

:remote => true の指定はAjaxを使用する場合指定します。指定なしの場合通常のポストとして扱われる。

5.2.0 form_with

指定無しでデフォルトでAjax、非同期通信になります。

Ajaxを利用しない場合、:local => true を指定することで通常のページ移動ありのポストになります。

<% form_with :local => true do |form| %>

Ruby on Rails5.2.0デフォルト設定ではAjaxが動かない

どうもデフォルトで動作するものと思えますがformとsubmitボタンでは動作しないらしいです。とりあえず動作はするという状態にする設定方法。

app/assets/javascripts/application.js

//= require jquery

の追記

Gemfileに

gem “jquery-rails”

を追記して

bundle install –path vendor/bundle

これでAjaxのフォームが動作するようになります。

jqueryはRailsで今後サポートされなくなるということで、今現在は使えていても今後使えなくなる可能性もあります。

まとめ

初心者が入門編のウェブアプリケーションを試していてつまづくところだと思ったので書きました。特にAjaxがうまく動いてくれない、という部分は重要です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です