Rails 5.2.4.3でAjaxの実装ができない。

Question

下記を参考に
http://song-of-life.hatenablog.com/entry/2017/09/30/234356
https://kurose.me/form_for_ajax/
https://qiita.com/rio_threehouse/items/b067d64eafdfbd25b91d

Rails 5.2.4.3でのAjaxの実装を試みていますが
ログをみるとHTMLになっており反応していなさそうです。
どの記事をみても、
まずは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

コントローラー
users_controller.rb

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

  def show
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    
    if @user.save
    flash[:success] = 'ユーザを登録しました。'
    redirect_to @user
    else
    flash.now[:danger] = 'ユーザの登録に失敗しました。'
    render :new
    end
  end
  
  def edit
    @user = User.find(params[:id])
  end
  
  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      flash[:success] = "Profile updated"
      redirect_to @user
    else
      render 'edit'
    end
  end
  
  private
  
  def user_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation)
  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 class="mytags">
      <div class="mytag">
        <h3>My Tag</h3>
      </div>
      <div class="mytag">
        <%= form_with(model: @hashtag, remote: true) do |f| %>
         <div class = "addtag">
          <%= f.submit 'Add Tag'%>
         </div> 
          <!--<div class="form-group">-->
          <div class = "textarea">
            <%= f.text_area :content, rows: 1 %>
          </div>    
          <!--</div>-->
        <% end %>
      </div>
    </div>
    
     <div class="box3">
      <%= render 'hashtags/hashtags', hashtags: @hashtags %>
     </div> 
</div>   

パーシャル
_randomtags.html

<% @randomtags.each do |randomtag| %>
      <div class = "r">
        <span>#<%= randomtag.content %></span>
      </div>
<% end %>

ルーティング
routes.rb

Rails.application.routes.draw do
  get 'hashtags/create'
  get 'hashtags/destroy'
  get 'sessions/new'
  get 'sessions/create'
  get 'sessions/destroy'
  get 'hashtags/index'
  post 'hashtags/index'
    root to: 'toppages#index'
    
    get 'login', to: 'sessions#new'
    post 'login', to: 'sessions#create'
    delete 'logout', to: 'sessions#destroy'
    
    get 'signup', to: 'users#new'
    resources :users, only: [:index, :show, :new, :create, :edit, :update]
    
    
    resources :hashtags, only: [:create, :destroy, :show] 
end

Answer 1

local:trueは削除してください。remote:trueで、「post側」は、ajax通信が行えるようになっています。

その後のHTML遷移は、controller側での設定となりますので、そちらを見直す必要があります。

以前、Turbolinksも含めて整理したものです。
わかりにくいと思いますが…参考になれば幸いです。
https://teratail.com/questions/238976#reply-352560

Comments

[Tomato_leaf]

ありがとうございます。確かにlocal: trueを削除するとJSに切り替わったようです。ですがまだ作動しないようです。おそらく私のコントローラー側の記載がおかしいのかもしれません。一度お時間ある時にでも追記分をご覧いただけますと幸いです。

[no1knows]

indexアクションにformat.jsを記載するのではなく、createか、updateに記載する形になるかと思います。

僕が知っている中で一番わかりやすいのは下記コードです。
scaffoldを利用してさくっと作ってみると理解しやすいと思います。
https://railsguides.jp/working_with_javascript_in_rails.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E8%80%83%E6%85%AE%E3%81%99%E3%81%B9%E3%81%8D%E7%82%B9

また関係ないところだと<%= form_with(model: @hashtag, url: users_path, method: :get, remote: true) do |f| %>のmethodですが、getで良かったんでしたっけ？
データを投げるからpostになるような気がしますが・・・間違っていたらすいません。

参考までにform_withは、デフォルトがremote:trueになっていたはずです。なので記載する必要はないですが、明示的に利用するのは良い方法だと思います。

[Tomato_leaf]

ありがとうございます。
じつは下記のようなアプリを作っています。
https://i.gyazo.com/23263dca7fe66cd17569b12a875feb51.png
RANDOMTAGのボタンを押すとハッシュタグがランダムで選び出されるというアプリです。
なのでPostというよりはGetで、しかもその一覧はIndexコントローラーによって表示されています。
ログインに成功していたらHashTagがランダムで表示されるといった感じですね。
なお、CreateとUpdateに関しては
ログイン機能とユーザー情報アップデートの関する記載をしているので
記載の場所としては今回は違うような気がしています。

[no1knows]

なるほど、了解です。
これまでご提示いただいた各ファイル名を追記いただけますか？
またパーシャルでよびだしているrandomtagsとrandomtags/randomtagsも記載ください。

[Tomato_leaf]

ありがとうございます。追記させていただきました。もし、なにか足りない情報などありましたら、教えてください。よろしくお願いいたします。

[no1knows]

index.js.erbから読み取ると動きとしては、ボタンを押すと画面上部のボタンなどが全て消えて、<div id="samplRemote">の中にrandomtags.htmlだけが表示される形だと思うのですが。
どうすれば非同期でデータの取得ができるのか、僕には力不足でよくわかりませんでした。
申し訳ないです。

お時間があるようでしたら、上記でご案内したRailsガイドのサンプルに沿って、ご自身のコードを設定いただくのが近道な気がします。

[Tomato_leaf]

下記に従い行ったところ、なんとか実装できました。ありがとうございます。https://github.com/sadiqmmm/clipboard-rails

[no1knows]

とりあえず解決したようでなによりです。
ただしAjaxを実装するのにclipboard-railsを利用するというのは適切なアプローチではないはずです。
もし転職などを考えてのポートフォリオであれば上記に示したような適切な実装にしておいたほうが良いかと思います。

[Tomato_leaf]

そうなんですね。。ありがとうございます。もう一度調べてみます。