質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

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

FKM
FKM

総合スコア3409

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0評価

0クリップ

252閲覧

投稿2021/12/24 04:25

編集2021/12/24 07:02

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

#【使用環境】

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

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

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

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

log:development.log

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

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

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。