0

下記のページをそれぞれ参考に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>  
4
  • form_withlocal: trueを外すとどうなりますか? local: trueがあると通常のフォーム送信になるようです。また、参考のページはform_forform_tagの場合のようです。あと、form_withremoteオプションがなく、デフォルトがAjaxのようです。参考:techracho.bpsinc.jp/hachi8833/2017_05_01/39502qiita.com/peco4107/items/f03580f6eeb12eb7ac41 のメモ部分
    – sanadan
    Commented 2020年6月9日 13:09
  • ありがとうございます。確かにlocal: trueを削除するとJSに切り替わったようです。ですがまだ作動しないようです。おそらく私のコントローラー側の記載がおかしいのかもしれません。一度お時間ある時にでも追記分をご覧いただけますと幸いです。
    – ligtning
    Commented 2020年6月9日 13:26
  • jQueryを使っているようですが、使用するように設定しているでしょうか? Rails 5.2からはデフォルトではjQueryは含まれないので、使用する場合は設定を追加する必要があります。参考:qiita.com/Masato338/items/911218d67cd052d874fd (ちなみに、readyturbolinks:loadで動かす処理は今のところなさそうなので、3は追加不要と思われます)
    – sanadan
    Commented 2020年6月10日 12:09
  • 下記に従い行ったところ、なんとか実装できました。ありがとうございます。github.com/sadiqmmm/clipboard-rails
    – ligtning
    Commented 2020年6月19日 7:22

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。