48
50

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

railsで【超簡単に】javascriptに変数を渡す方法(jQuery)

Last updated at Posted at 2017-01-24

やりたいこと

ビューで使える変数(current_user.nameとか@group.idとか)を、
javascriptでも超簡単に使えるようにしたい。(rails)

実際にやること

  • viewにinputで変数を埋め込む
  • jsの方で取り出す

viewに変数を埋め込む

viewの中でinputを使うと変数を埋め込むことができます。
また、hiddenオプションを使えばフロントでは見えなくなります。(ソースコードを表示すると見えます。)

具体的には以下のようにしてください。

index.html.haml
%input{name: "current_user_name", type: "hidden", value: current_user.name, class: 'current_user_name' }/

hamlなので、適宜htmlに変換してください。

inputでviewの中へ埋め込み、type: "hidden"で非表示にしました。
javaで使える値であるvalue: current_user.nameを設定しています。ダブルクオーテーションなどを付けないように注意してください。
ちなみに、実際の値をchromeの"ソースを表示"機能を使って確かめられます。
スクリーンショット 2017-01-24 17.58.38.png

さらにclassを設定してviewでの値の埋め込みは終了です。

javascript側でどう読み込むか

jQueryを使います。
クラスを指定して、val()とすることにより中のvalueを取り出せます。

messages.js
name = $('.current_user_name').val();

viewで設定したclassであるcurrent_user_nameを指定し、val()で取り出します。

他の方法もあるらしい、、、

gonというgemを使う方法もあるそうです。

調べたらgonを使った方が簡単かもしれない、、、
複数変数を使う場合はgonの方が簡単な気がします、、、

ゴンさん、、、、

##番外編;最近買った、面白いもの
・ハンターハンター34巻(6/29)
クロロ VS ヒソカとか、どうやっても面白くなるとしか
・カーテン自動開閉ロボット
カーテンレールに付ける4000円のロボット。
これを付けてから目覚ましなしで起きられる率が上がった。
・衛藤美彩 写真集
「綺麗なお姉さん」が好きな人、ちょっと眺めてるだけで幸せになれますよ。

参考サイト様

【jQuery】input要素の値を取得する、設定する

RailsからJavaScriptにデータを渡す

Ruby On Rails Gemまとめ -gon-

48
50
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
50

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?