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

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

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

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

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

Q&A

0回答

262閲覧

railsのajaxが分からない

begenner

総合スコア79

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

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

0グッド

0クリップ

投稿2017/12/02 15:32

rails初心者です。わかる方がいらっしゃれば教えていただきますようお願いします。

###実現したいこと
下記サイトをベースにテキストボックスにユーザーの年齢の値をセットしたいです。

リンク
https://doruby.jp/users/maya/entries/_Rails_Rails_Ajax_Ajax_

###問題点
0. users.coffeeとsearch_user.cofeeファイルのjQueryもしくはCoffeeScriptのコードが理解できない(2〜5行目の処理で1行づつ何をしているのか知りたいです)
0. セレクトボックスを選択してから表示されるまでのファイルの読み込み順番がわからない
自分の今の読み込みの順番のイメージは
①view -> ②users.coffee -> ③routes.rb -> ④usrs_controller.rb -> ⑤search_user.coffee -> ⑥View
の順番で合っていますでしょうか?

###補足情報(使用環境)
OS: mac
Ruby: 2.3.5
Rails: 4.2.5
DB: MySQL
###前準備
0. アプリケーションの作成
rails new user_find -d mysql

  1. コントローラーの作成

rails g controller User index

  1. Userモデルを作成

rails d model User name:string age:integer
0. サンプルユーザーの登録(rails console にて)
user = User.new(name: "ユーザー1", age: 10)
user.save
user = User.new(name: "ユーザー2", age: 20)
user.save
user = User.new(name: "ユーザー1", age: 30)
user.save

  1. 新規ファイルを作成

app/views/users/search_coffee.coffee

###サイトのサンプルソース

ruby

1<!--View部分の表示--> 2<!--app/views/users/index.html--> 3<div id="select_user"> 4<%= select :user, :name, [["ユーザー1", 1], ["ユーザー2", 2], ["ユーザー3", 3]], :include_blank => true %> 5</div> 6<p>このユーザーの年齢</p> 7<p id="user_age"> 8 <div sytle="display: none;"> 9 <%= form_tag(search_user_users_path, remote: true) do |f| %> 10 <%= text_field_tag :user_id %> 11 <%= submit_tag "意味なし" %> 12 <% end %> 13 </div> 14</p>

coffeescript

1#処理①(セレクトボックスの選択要素が切り替わった時) 2#app/assets/javascripts/users.coffee 3$ -> 4 $('#select_user select').change( -> 5 $user_id = $('#user_id') 6 $user_id.val($(this).val()) 7 $user_id.closest('form').submit() 8 )

ruby

1#処理②users_controllerのsearch_userアクションへ飛ぶ 2#app/config/routes.rb 3Rails.application.routes.draw do 4 root 'users#index' 5 resource :users do 6 post 'search_user', on: :collection 7 end 8end

ruby

1#処理③app/controllers/users_controller.rb 2 def search_user 3 @user = User.find(params[:user_id]) 4 render layout: false 5 end

ruby

1#処理④(何かを受け取って値を表示する) 2#app/assets/javascripts/search_user.coffee 3$('#user_age').text('<%= @user.age %>')

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問