質問編集履歴

3 訂正文追加

mogemoge

mogemoge score 10

2017/01/27 11:09  投稿

Railsのajaxで.js.erbからパーシャルを呼びたい
###前提・実現したいこと
Railsでクイズアプリを作っています。ボタン押下回答時にパーシャルhtmlを表示したいです。
questions/show.html.erbに設置した、
```ruby
<%= button_to 'hoge',button_path(qid:@question.qid),method: :get,remote:true %>
```
というボタンを押したときに、同じshow.html.erbにある<div id="result"></div>の中にパーシャル(views/questions/_partial1.html.erb)を表示したいです。
(questions_controllerのbuttonは受け取った変数params['qid']を使って適当な処理をします。)
###試したこと
そこで、以下の内容でbutton.js.erbを作成しました。
```javascript
$("#result").html("#{j(render partial:'partial1')}")
```
ルーティング設定は次のようになっています。
```ruby
get 'questions/index'
get 'questions/show'
get 'questions/ajax_method'=>'questions#ajax_method',as:'ajax_method'
get 'questions/button'=>'questions#button',as:'button'
root 'logins#index'
resource :login, only: %i{show create destroy}
```
###発生している問題・エラーメッセージ
しかし、パーシャルは表示されず、上記コード($〜)がそのまま<div id="result"></div>の中に出てきてしまいます。(ターミナルの出力には「Rendered questions/_partial1.html.erb」と出ているのですが)
 
###訂正  
表示されるのは$〜ではなく、#{j(render partial:'partial1')}でした。  
###補足情報(言語/FW/ツール等のバージョンなど)
ubuntu 15.04 / Rails 5.0.0.1
Railsを始めたばかりなのでどこか勘違いしているのだと思います。よろしくお願いします。
###追記
情報を追加します。
Gemfile
```ここに言語を入力
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
gem 'jquery-rails'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
 gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
 # Call 'byebug' anywhere in the code to stop execution and get a debugger console
 gem 'byebug', platform: :mri
end
group :development do
 # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
 gem 'web-console'
 gem 'listen', '~> 3.0.5'
 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
 gem 'spring'
 gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```
questions_controller.rb
```Ruby
class QuestionsController < ApplicationController
 include AjaxHelper
 @@answered=false
 @@reload_status='next'
 @@question_set=Question.new
 def index
 end
 def show
   @@answered=false
   @@questions=Question.all
   @num_of_questions=@@questions.length
   @@users=User.where(exist: true)
   #@question_set||=@@questions.sample
   if @@reload_status=='next'
     margin_max=Float::MAX
     @@questions.each do |q|
       if (current_user.theta-q.b).abs<margin_max
         @margin_max=(current_user.theta-q.b).abs
         @@question_set=q
       end
     end
     @question=@@question_set
   else
     @question=@@questions.sample
   end
   collects=0
   @@questions.each do |q|
     collects+=eval("q.user#{current_user.number}")
   end
   @accuracy=collects/@@questions.length.to_f
 end
 def ajax_method
   if params['reload'].present?
     @@reload_status=params['reload']
   end
   respond_to do |format|
     format.js{render ajax_redirect_to "http://localhost:3000/questions/show"}
   end
 end
 def button
   if params['chosen'].present?&&!@@answered
     if params['chosen']==params['answer']
       @result=1
     else
       @result=0
     end
     @@question_set.update("user#{current_user.number}": @result)
     @@answered=true
     current_user.exist=true
     current_user.save
     l_theta=Float::MIN
     -3.0.step(3.0,0.1) do |theta_arg|
       tmp_calc=1.0
       @@questions.each do |q|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**eval("q.user#{current_user.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**(1.0-eval("q.user#{current_user.number}"))
       end
       if l_theta<tmp_calc
         current_user.theta=theta_arg
         l_theta=tmp_calc
       end
     end
     current_user.save
     p "updated theta of user#{current_user.number}: "+current_user.theta.to_s
     l_b=Float::MIN
     -3.0.step(3.0,0.1) do |b_arg|
       tmp_calc=1.0
       @@users.each do |u|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**eval("@@question_set.user#{u.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**(1.0-eval("@@question_set.user#{u.number}"))
       end
       if l_b<tmp_calc
         @@question_set.b=b_arg
         l_b=tmp_calc
       end
     end
     @@question_set.save
     p "updated b of questions#{@@question_set.qid}: "+@@question_set.b.to_s
     f=File.open('./db/record.txt', 'w')
     record=""
     @@users.each do |u|
       @@questions.each do |q|
         record+="u_"+u.number.to_s+"_"+q.qid.to_s+"="+eval("q.user#{u.number}").to_s+";"
       end
     end
     f.print encrypt(record)
     f.close
   end
 end
 def encrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.encrypt_and_sign(word)
 end
 def decrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.decrypt_and_verify(word)
 end
end
```
show.html.erbのボタンは実際には以下です。
```ここに言語を入力
<%= button_to '1. '+@qdata[0],button_path(qid:@question.qid,chosen:@qdata[0],answer:@qdata[4]),method: :get,remote:true,id:1,style:"height:30px" %>
```
  • Ruby on Rails

    10679 questions

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

  • jQuery

    9484 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1536 questions

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

2 ソースコード追加

mogemoge

mogemoge score 10

2017/01/27 11:03  投稿

Railsのajaxで.js.erbからパーシャルを呼びたい
###前提・実現したいこと
Railsでクイズアプリを作っています。ボタン押下回答時にパーシャルhtmlを表示したいです。
questions/show.html.erbに設置した、
```ruby
<%= button_to 'hoge',button_path(qid:@question.qid),method: :get,remote:true %>
```
というボタンを押したときに、同じshow.html.erbにある<div id="result"></div>の中にパーシャル(views/questions/_partial1.html.erb)を表示したいです。
(questions_controllerのbuttonは受け取った変数params['qid']を使って適当な処理をします。)
###試したこと
そこで、以下の内容でbutton.js.erbを作成しました。
```javascript
$("#result").html("#{j(render partial:'partial1')}")
```
ルーティング設定は次のようになっています。
```ruby
get 'questions/index'
get 'questions/show'
get 'questions/ajax_method'=>'questions#ajax_method',as:'ajax_method'
get 'questions/button'=>'questions#button',as:'button'
root 'logins#index'
resource :login, only: %i{show create destroy}
```
###発生している問題・エラーメッセージ
しかし、パーシャルは表示されず、上記コード($〜)がそのまま<div id="result"></div>の中に出てきてしまいます。(ターミナルの出力には「Rendered questions/_partial1.html.erb」と出ているのですが)
###補足情報(言語/FW/ツール等のバージョンなど)
ubuntu 15.04 / Rails 5.0.0.1
Railsを始めたばかりなのでどこか勘違いしているのだと思います。よろしくお願いします。
###追記
情報を追加します。
Gemfile
```ここに言語を入力
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
gem 'jquery-rails'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
 gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
 # Call 'byebug' anywhere in the code to stop execution and get a debugger console
 gem 'byebug', platform: :mri
end
group :development do
 # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
 gem 'web-console'
 gem 'listen', '~> 3.0.5'
 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
 gem 'spring'
 gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```
questions_controller.rb
```Ruby
class QuestionsController < ApplicationController
 include AjaxHelper
 @@answered=false
 @@reload_status='next'
 @@question_set=Question.new
 def index
 end
 def show
   @@answered=false
   @@questions=Question.all
   @num_of_questions=@@questions.length
   @@users=User.where(exist: true)
   #@question_set||=@@questions.sample
   if @@reload_status=='next'
     margin_max=Float::MAX
     @@questions.each do |q|
       if (current_user.theta-q.b).abs<margin_max
         @margin_max=(current_user.theta-q.b).abs
         @@question_set=q
       end
     end
     @question=@@question_set
   else
     @question=@@questions.sample
   end
   collects=0
   @@questions.each do |q|
     collects+=eval("q.user#{current_user.number}")
   end
   @accuracy=collects/@@questions.length.to_f
 end
 def ajax_method
   if params['reload'].present?
     @@reload_status=params['reload']
   end
   respond_to do |format|
     format.js{render ajax_redirect_to "http://localhost:3000/questions/show"}
   end
 end
 def button
   if params['chosen'].present?&&!@@answered
     if params['chosen']==params['answer']
       @result=1
     else
       @result=0
     end
     @@question_set.update("user#{current_user.number}": @result)
     @@answered=true
     current_user.exist=true
     current_user.save
     l_theta=Float::MIN
     -3.0.step(3.0,0.1) do |theta_arg|
       tmp_calc=1.0
       @@questions.each do |q|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**eval("q.user#{current_user.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**(1.0-eval("q.user#{current_user.number}"))
       end
       if l_theta<tmp_calc
         current_user.theta=theta_arg
         l_theta=tmp_calc
       end
     end
     current_user.save
     p "updated theta of user#{current_user.number}: "+current_user.theta.to_s
     l_b=Float::MIN
     -3.0.step(3.0,0.1) do |b_arg|
       tmp_calc=1.0
       @@users.each do |u|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**eval("@@question_set.user#{u.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**(1.0-eval("@@question_set.user#{u.number}"))
       end
       if l_b<tmp_calc
         @@question_set.b=b_arg
         l_b=tmp_calc
       end
     end
     @@question_set.save
     p "updated b of questions#{@@question_set.qid}: "+@@question_set.b.to_s
     f=File.open('./db/record.txt', 'w')
     record=""
     @@users.each do |u|
       @@questions.each do |q|
         record+="u_"+u.number.to_s+"_"+q.qid.to_s+"="+eval("q.user#{u.number}").to_s+";"
       end
     end
     f.print encrypt(record)
     f.close
   end
 end
 def encrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.encrypt_and_sign(word)
 end
 def decrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.decrypt_and_verify(word)
 end
end
```  
 
show.html.erbのボタンは実際には以下です。  
```ここに言語を入力  
<%= button_to '1. '+@qdata[0],button_path(qid:@question.qid,chosen:@qdata[0],answer:@qdata[4]),method: :get,remote:true,id:1,style:"height:30px" %>  
```
  • Ruby on Rails

    10679 questions

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

  • jQuery

    9484 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1536 questions

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

1 ソースコード追加

mogemoge

mogemoge score 10

2017/01/27 10:57  投稿

Railsのajaxで.js.erbからパーシャルを呼びたい
###前提・実現したいこと
Railsでクイズアプリを作っています。ボタン押下回答時にパーシャルhtmlを表示したいです。
questions/show.html.erbに設置した、
```ruby
<%= button_to 'hoge',button_path(qid:@question.qid),method: :get,remote:true %>
```
というボタンを押したときに、同じshow.html.erbにある<div id="result"></div>の中にパーシャル(views/questions/_partial1.html.erb)を表示したいです。
(questions_controllerのbuttonは受け取った変数params['qid']を使って適当な処理をします。)
###試したこと
そこで、以下の内容でbutton.js.erbを作成しました。
```javascript
$("#result").html("#{j(render partial:'partial1')}")
```
ルーティング設定は次のようになっています。
```ruby
get 'questions/index'
get 'questions/show'
get 'questions/ajax_method'=>'questions#ajax_method',as:'ajax_method'
get 'questions/button'=>'questions#button',as:'button'
root 'logins#index'
resource :login, only: %i{show create destroy}
```
###発生している問題・エラーメッセージ
しかし、パーシャルは表示されず、上記コード($〜)がそのまま<div id="result"></div>の中に出てきてしまいます。(ターミナルの出力には「Rendered questions/_partial1.html.erb」と出ているのですが)
###補足情報(言語/FW/ツール等のバージョンなど)
ubuntu 15.04 / Rails 5.0.0.1
Railsを始めたばかりなのでどこか勘違いしているのだと思います。よろしくお願いします。
Railsを始めたばかりなのでどこか勘違いしているのだと思います。よろしくお願いします。
###追記
情報を追加します。
Gemfile
```ここに言語を入力
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
gem 'jquery-rails'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
 gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
 # Call 'byebug' anywhere in the code to stop execution and get a debugger console
 gem 'byebug', platform: :mri
end
group :development do
 # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
 gem 'web-console'
 gem 'listen', '~> 3.0.5'
 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
 gem 'spring'
 gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```
questions_controller.rb
```Ruby
class QuestionsController < ApplicationController
 include AjaxHelper
 @@answered=false
 @@reload_status='next'
 @@question_set=Question.new
 def index
 end
 def show
   @@answered=false
   @@questions=Question.all
   @num_of_questions=@@questions.length
   @@users=User.where(exist: true)
   #@question_set||=@@questions.sample
   if @@reload_status=='next'
     margin_max=Float::MAX
     @@questions.each do |q|
       if (current_user.theta-q.b).abs<margin_max
         @margin_max=(current_user.theta-q.b).abs
         @@question_set=q
       end
     end
     @question=@@question_set
   else
     @question=@@questions.sample
   end
   collects=0
   @@questions.each do |q|
     collects+=eval("q.user#{current_user.number}")
   end
   @accuracy=collects/@@questions.length.to_f
 end
 def ajax_method
   if params['reload'].present?
     @@reload_status=params['reload']
   end
   respond_to do |format|
     format.js{render ajax_redirect_to "http://localhost:3000/questions/show"}
   end
 end
 def button
   if params['chosen'].present?&&!@@answered
     if params['chosen']==params['answer']
       @result=1
     else
       @result=0
     end
     @@question_set.update("user#{current_user.number}": @result)
     @@answered=true
     current_user.exist=true
     current_user.save
     l_theta=Float::MIN
     -3.0.step(3.0,0.1) do |theta_arg|
       tmp_calc=1.0
       @@questions.each do |q|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**eval("q.user#{current_user.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(theta_arg-q.b))))**(1.0-eval("q.user#{current_user.number}"))
       end
       if l_theta<tmp_calc
         current_user.theta=theta_arg
         l_theta=tmp_calc
       end
     end
     current_user.save
     p "updated theta of user#{current_user.number}: "+current_user.theta.to_s
     l_b=Float::MIN
     -3.0.step(3.0,0.1) do |b_arg|
       tmp_calc=1.0
       @@users.each do |u|
         tmp_calc*=(1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**eval("@@question_set.user#{u.number}")*(1.0-1.0/(1.0+Math.exp(-1.7*(u.theta-b_arg))))**(1.0-eval("@@question_set.user#{u.number}"))
       end
       if l_b<tmp_calc
         @@question_set.b=b_arg
         l_b=tmp_calc
       end
     end
     @@question_set.save
     p "updated b of questions#{@@question_set.qid}: "+@@question_set.b.to_s
     f=File.open('./db/record.txt', 'w')
     record=""
     @@users.each do |u|
       @@questions.each do |q|
         record+="u_"+u.number.to_s+"_"+q.qid.to_s+"="+eval("q.user#{u.number}").to_s+";"
       end
     end
     f.print encrypt(record)
     f.close
   end
 end
 def encrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.encrypt_and_sign(word)
 end
 def decrypt(word)
   crypt = ActiveSupport::MessageEncryptor.new(SECURE, CIPHER)
   crypt.decrypt_and_verify(word)
 end
end
```
  • Ruby on Rails

    10679 questions

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

  • jQuery

    9484 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1536 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る