Rails6でAjax制御によるアクションと、新規登録のアクションが被ってしまい、Ajaxが制御できない

Question

以前製作していたAJax制御を伴う検索システムに、新規登録画面を修復した所、困った問題が発生しました。

#【使用環境】

• Ruby 2.6 Rails6.1.3
• Virtual Box6.1 CentOS7.4

#発生した問題点
createアクションが被ってしまい、Ajax制御ができなくなりました。

• AjaxはRails-ujsを用いて発火しているが、これによる検索処理がコントローラ内のcreateアクションとなっている。
• 一方で、新規登録を実行した際の処理用アクションもcreateとなっている。

このようにログを確認すると双方ともアクションはcreateになっており、被ってしまっていることがわかります。

Processing by CitiesController#create as HTML
  Parameters: {"authenticity_token"=>"[FILTERED]", "city"=>{"base_no"=>"1301", "city_name"=>"東京特別区", "region"=>"関東", "pref_no"=>"13", "population"=>"9620000"}, "commit"=>"Create City"}

Processing by CitiesController#create as JS
  Parameters: {"q"=>{"pref_no_eq"=>"", "city_name_cont"=>"", "population_gteq"=>"", "population_lteq"=>""}, "commit"=>"Search"}
Completed 400 Bad Request in 3ms (ActiveRecord: 0.0ms | Allocations: 652)

いちおう、indexアクションに記載している処理をまるごとcreateアクションに書き換えるとAjaxは機能しますが、それだと今度は新規作成ができなくなってしまいます。

実現したいこと

もともとはAjaxはjQuery-ujsで制御してindexアクションに飛ぶようにしていました。その後Rails6になってjquery-ujsでAjax制御するとbootstrapが機能しなくなったので、Rails-ujsで制御するようにしました。ですが、AjaxをRails-ujsで発火するようになったことにより、indexアクションではなくcreateアクションに飛んでしまうようになってしまったので、こっちをcreateアクションではなくindexアクションに飛ばすようにできないでしょうか。あるいは明示的にパラメータを指定して、jsまたはformに対して、任意のアクションに飛ばす制御ができないかご教授お願い致します。

やってみたこと

• formタグにパラメータを付与してみた
• routes.rbに明示的にルーティングを記載してみた
• Rails-ujsのパラメータを明示して、イベントを発火するようにしてみた。

いずれもうまくいかずです。

cities_controller.rb

class CitiesController < ApplicationController
	protect_from_forgery :except => [:index,:paginate,:picture]
  before_action only: [:new, :show, :edit, :update, :destroy, :picture]
#中略
  def index
		query = "select distinct(region) as region from cities group by region order by pref_no"
		@regions = City.find_by_sql(query)
			unless params[:q].blank?
			logger.debug('TR')
			@q = City.ransack(params[:q])
			@q.sorts = 'population desc' if @q.sorts.empty?
			@cities = @q.result.page(params[:page]).per(10)
			#コンテナのレンダリング
				p_pager = render_to_string(
					partial: 'ajax_pager',
					locals: { :cities => @cities },
				)
				if request.xhr?
					render json:{
						container: p_cities,
						pager: p_pager,
					}
				end
		else
			@q = City.ransack(params[:q])
			@q.sorts = 'population desc' if @q.sorts.empty?
			@cities = @q.result.page(params[:page]).per(10)
		end 
 end

	#テーブルデータの新規登録
  def create
		@city = City.new(city_params)
		logger.debug("testtesttestst")
		respond_to do |format|
			if @city.save
				format.html{ redirect_to @city, notice:'City was successfully created.'}
				format.json{ render :show,status: :created, location: @city }
			else
				format.html{ render :new}
				format.json{ render json: @city.errors, status: :unprocessable_entity }
			end
		end
  end

Ajaxの発火用js

import * as $ from "jquery";
import Rails from "@rails/ujs";

function register_callback(){
        jQuery(function(){
						let data
						$("#city-form").each(function(){
								$("#ajax-contents").on('change keyup',function(e){
										console.log("A")
										console.log($('#city-form').get(0))
										Rails.fire($('#city-form').get(0), 'submit')
								})
						})
            $("#city-form").on(
							"ajax:complete",
							function(d){
								//console.log("BO")
								if(d.detail[0].status == 200){
									data = d.detail[0].responseText
									data = $.parseJSON(data)
									//console.log("KU")
									$('#ajax-response-wrapper').empty().append(data.container)
									$('#pager').empty().append(data.pager)
								}
							}
						)
            $("#city-form").on("ajax:fail",function(event,data,status,xhr){
                alert("fail!")
            })
				})


window.register_callback = register_callback;

編集フォームはこのpartialファイルを用いています。
_form.html.erb

<%= form_for @city, :html => { :class => "form-horizontal city" } do |f| %>

  <% if @city.errors.any? %>
    <div id="error_expl" class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title"><%= pluralize(@city.errors.count, "error") %> prohibited this city from being saved:</h3>
      </div>
      <div class="panel-body">
        <ul>
        <% @city.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
        </ul>
      </div>
    </div>
  <% end %>

  <div class="form-group">
    <%= f.label :base_no, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :base_no, :class => 'form-control' %>
    </div>
    <%=f.error_span(:base_no) %>
  </div>
  <div class="form-group">
    <%= f.label :city_name, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :city_name, :class => 'form-control' %>
    </div>
    <%=f.error_span(:city_name) %>
  </div>
  <div class="form-group">
    <%= f.label :region, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :region, :class => 'form-control' %>
    </div>
    <%=f.error_span(:city_name) %>
  </div>
  <div class="form-group">
    <%= f.label :pref_no, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :pref_no, :class => 'form-control' %>
    </div>
    <%=f.error_span(:pref_no) %>
  </div>
  <div class="form-group">
    <%= f.label :population, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :population, :class => 'form-control' %>
    </div>
    <%=f.error_span(:population) %>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
      cities_path, :class => 'btn btn-default' %>
    </div>
  </div>
<% end %>

routes.rb

Rails.application.routes.draw do
resources :cities
root to: 'cities#index'
	post 'cities/index', to: 'cities#index'
  post 'cities/create', to: 'cities#create'
	post 'cities/picture', to: 'cities#picture'
  #post 'cities/index', to: 'cities#index',as: 'cities_index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Answer 1

Processing by CitiesController#create as HTML
Processing by CitiesController#create as JS
とformatが違ってますね。これを使ってcontreoller側で場合分けしては？

respond_to do |format|
 format.html do
   。。。。。・
 end
 format.js { index }
end

かな

Comments

[FKM]

respond to do | format |を使ってcreateを分岐用アクションにすることで解決しました。
ありがとうございます。

　　 #xhrリクエスト有無で振り分け
def create
respond_to do |format|
logger.debug("AAA")
if request.xhr?
logger.debug("BBB")
format.js{ search } #検索用（indexは初期動作で置いておく必要があった）
else
logger.debug("CCC")
format.html{ registar } #登録用。元のcreate
end
end
end