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

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

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

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

Ruby on Rails

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

Q&A

解決済

1回答

2372閲覧

Ruby on rails 5.1.1 jQuery ajax が機能しない

ArthurLawrence

総合スコア15

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

Ruby on Rails

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

0グッド

0クリップ

投稿2017/06/01 09:29

編集2017/06/01 09:48

##セレクトボックスでajaxを用いて、選択肢を絞りたい。

ですが、サイトの指示通りにやってもうまくうごきません。

【Rails】セレクトボックスの内容をAjaxを使用して動的に変更する

GoogleCromeのConsoleにエラーはありませんし、jQueryの他のイベントはちゃんと機能します。

Gemfile

gem 'rails', '~> 5.1.1' gem 'sqlite3' gem 'puma', '~> 3.7' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.2' gem 'turbolinks', '~> 5' gem 'jbuilder', '~> 2.5' # gem 'redis', '~> 3.0' # gem 'bcrypt', '~> 3.1.7' # gem 'capistrano-rails', group: :development gem 'bootstrap-sass' gem 'annotate' gem 'hirb' # モデルの出力結果を表形式で表示するGem gem 'hirb-unicode' # 日本語などマルチバイト文字の出力時の出力結果のずれに対応 gem 'jquery-rails' gem 'jquery-ui-rails'

route.rb

get 'hello/index' get 'hello/books'

book.rb

class Book < ApplicationRecord belongs_to :publisher end

publisher.rb

class Publisher < ApplicationRecord end

hello/index.html.erb

<h1 >Hello#index</h1> <%= select_tag :publisher_id, options_from_collection_for_select(Publisher.all, :id, :name) %> <%= select_tag :book_id, options_from_collection_for_select(Book.all, :id, :name) %> <script> $(function() { $('#publisher_id').change(function() { $.get({ url: "#{hello_books_path}", data: { publisher_id: $('#publisher_id').has('option:selected').val() } }); }); }); </script>

hello/books.js.erb

$('#book_id').html('<%= j(option_for_select(@books.pluck(:name,:id))) %>')

hello_controller.rb

class HelloController < ApplicationController def index;end def books @books = Book.where(publisher_id: params[:publisher_id]) end end

選択肢を変えたときの
ターミナルの反応
getは動いている模様

Started GET "/hello/index?publisher_id=1" for 127.0.0.1 at 2017-06-01 18:44:38 +0900 Processing by HelloController#index as */* Parameters: {"publisher_id"=>"1"} Rendering hello/index.html.erb within layouts/application Publisher Load (0.1ms) SELECT "publishers".* FROM "publishers" Book Load (0.1ms) SELECT "books".* FROM "books" Rendered hello/index.html.erb within layouts/application (2.1ms) Completed 200 OK in 76ms (Views: 61.3ms | ActiveRecord: 0.3ms)

book.js.erbが実行されていない?

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  • Javascript のコードにRails 側のビュー描画を混入させない
  • Javascript(≒クライアント)とRails(≒サーバ)とのやり取りはJSON を使用する

ということを意識して書いてみました

※手元の環境に合わせて...

  • Javascript ではなく CoffeeScript で書きました
  • Rails のバージョンは4.2 で検証しました

ご容赦ください


ruby

1class HelloController < ApplicationController 2 def index 3 end 4 5 def books 6 @books = Book.where(publisher_id: params.dig(:publisher_id)) 7 # binding.pry # デバッグ用 8 9 # 明示的にJSON データ形式でリクエストに応答する 10 render json: @books 11 end 12end

coffee

1# app/assets/javascripts/hello.coffee 2 3# GET したbooks を <option/> に変換してリスト選択肢として挿入 4updateBookSelectList = (books) -> 5 elements = books.map((obj) -> 6 option = $('<option/>') 7 option.attr({ 8 value: obj.id 9 }).html(obj.name) 10 ) 11 12 $('#book_id').empty().html(elements) 13 14$ -> 15 # 著者リストの選択に合わせて、著書のリストを更新する 16 $('#publisher_id').on('change', -> 17 publisher_id = $('#publisher_id').has('option:selected').val() 18 $.get('books', { 19 publisher_id: publisher_id 20 }).done((data) -> 21 updateBookSelectList(data) 22 ) 23 )

これで、記事中の目的は達成できるかと思いますが、いかがでしょうか

何か参考になれば幸いです

投稿2017/06/01 13:54

gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ArthurLawrence

2017/06/02 00:37 編集

指示通り、ファイルを書き換えてみたら5.1.1でも問題なく目的を達成することができました。 やはり、book.js.erbが動いてないということが問題だったと思います。unobtrusiveなやり方を身に付けたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問