下記のページをそれぞれ参考にRails 5.2.4.3でのAjaxの実装を試みていますが、
ログをみるとHTMLになっており反応していなさそうです。
参考にしたページ
【Rails】remote: trueでサクッと画面切り替え
form_forをremote: trueでAjax実装
【Rails初心者】Ajaxの実装方法を理解する(非同期通信) - Qiita
どの記事をみても、まずは form_with
などに remote: true
を加える必要があるそうなのですが動きません。動かないというよりはボタンをクリックしてもHTML遷移してしまいます。
これはどのようなことが原因と考えられるでしょうか?
<div id="samplRemote">
<%= form_with(model: @hashtag, url: users_path, method: :get, local: true, remote: true) do |f| %>
<%= f.submit 'RandomTag', class: 'btn btn-primary btn-sm' %>
<!--<div>-->
<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Copy
</button>
<!--</div>-->
<%= f.label :"Set Number" %>
<%= f.select :hashtags, 1.upto(30).map{|i| [i, i]}, class:"form-control" %><br>
<% end %>
追記
ありがとうございます。
確かにlocal: trueを削除するとJSに切り替わったようです。
ですがボタンクリックしても作動しません。
これはコントローラー側のコードが悪いのでしょうか?
ここを参考にしながら書きました。
https://www.sejuku.net/blog/28967
http://song-of-life.hatenablog.com/entry/2017/09/30/234356
UsersController
class UsersController < ApplicationController
before_action :require_user_logged_in, only: [:index, :show]
def index
if logged_in?
@hashtag = current_user.hashtags.build # form_with 用
@hashtags = current_user.hashtags.order(id: :desc).page(params[:page])
if params[:hashtag].nil?
@randomtags = Hashtag.order("RAND()").limit(28)
# Ajax
respond_to do |format|
format.html
format.js
end
# Ajax
else
@randomtags = Hashtag.order("RAND()").limit(params[:hashtag][:hashtags])
# Ajax
respond_to do |format|
format.html
format.js
end
# Ajax
end
end
end
ビューファイルです。
パーシャルへレンダーしています。
index.js.erb
$('#samplRemote').html("<%= escape_javascript(render 'randomtags') %>");
index.html.erb
<div id="samplRemote">
<%= form_with(model: @hashtag, url: users_path, method: :get, remote: true) do |f| %>
<%= f.submit 'RandomTag', class: 'btn1 btn-primary btn-sm' %>
<!--<div>-->
<button class="clipboard-btn btn1 btn-primary btn-sm" data-clipboard-action="copy" data-clipboard-target="#bar">
Copy
</button>
<!--</div>-->
<div class = "setnumber">
<%= f.label :"Set Number" %>
</div>
<%= f.select :hashtags, 1.upto(30).map{|i| [i, i]}, class:"form-control" %><br>
<% end %>
<!-- Target -->
<div class="box2" id="bar">
<p><%= render 'randomtags/randomtags', randomtags: @randomtags %></p>
</div>
<!-- Trigger -->
</div>
form_with
のlocal: true
を外すとどうなりますか?local: true
があると通常のフォーム送信になるようです。また、参考のページはform_for
やform_tag
の場合のようです。あと、form_with
はremote
オプションがなく、デフォルトがAjaxのようです。参考:techracho.bpsinc.jp/hachi8833/2017_05_01/39502 と qiita.com/peco4107/items/f03580f6eeb12eb7ac41 のメモ部分ready
やturbolinks:load
で動かす処理は今のところなさそうなので、3は追加不要と思われます)