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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 4

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

解決済

CoffeeScriptでchangeイベントが動作しません

sorachi77
sorachi77

総合スコア0

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 4

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

5回答

1評価

0クリップ

5379閲覧

投稿2016/05/01 08:59

編集2022/01/12 10:58

###前提・実現したいこと
Ruby on Railsで記述しているselectタグの変更を検知するイベントを、CoffeeScriptで記述したい。

###発生している問題・エラーメッセージ
ページ読み込み時に一度実行されるが、ブラウザからselectの選択を変えても、JSコンソールには何の反応もない。

###該当のソースコード

lang

<%= select_tag\('pay_category', options_from_collection_for_select\(@categories, :category, :category\)\) %><br>

lang

do -> console\.log\('test'\) \$\('\.pay_category'\)\.on 'change': console\.log\('change'\)

###chromeのJSコンソール出力結果
①ページ読み込み時
test
change

②select要素変更時
①と変化なし

###試したこと
CoffeeScript公式サイトのTRY機能でコンパイルしたところ、以下のようにコンパイルされました。

lang

\(function\(\) { console\.log\('test'\); return \$\('\.pay_category'\)\.on\({ 'change': console\.log\('change'\) }\); }\)\(\);

最後の処理にreturnが付くのがCoffeeScriptの仕様と勉強したのですが、それによって即時関数が終了してしまっている(?)ことが原因かと考え、色々検索してみたのですが解決することができず、ご質問させていただきました。

初歩的な質問となってしまい、大変申し訳ございません。
もし解決方法をご存知でしたら、お手数をおかけいたしますがよろしくお願い致します。

###2016/5/1 21:30追記
皆様ご回答いただきましてありがとうございました。

お恥ずかしながら、classとidの指定方法を混合しておりました。
いただいたご回答をもとに、以下のとおり修正致しました。

lang

\$\('#pay_category'\)\.on 'change', -> console\.log 'change'

しかし、これでselectの選択を変更してもJSコンソールに変化がなく、もっと根本的なところに原因があるのかと、次の実験を行いました。

【実験①:シンプルに要素の取得だけ試す】

以下のコードを追記し、要素の取得ができているかどうかの実験を行いました。

Viewにただのテキストボックスを追加。

lang

<%= select_tag\('pay_category', options_from_collection_for_select\(@categories, :category, :category\)\) %><br> <input type="text" id="textone" value="textone初期値">

CoffeeScriptに以下を追加。

lang

do -> console\.log\('test'\) #追加 test = \$\('#textone'\)\.val\(\) console\.log\(test\) \$\('#pay_category'\)\.on 'change', -> console\.log 'change'

しかし、textoneのログ結果はundifinedでした。
ですので、根本的にフォームの要素を取得できていないことがわかりました。

【実験②:Viewにscriptを書いて実験】

Viewファイルの1番下に以下を追加。

lang

<script> var test; test = \$\('#textone'\)\.val\(\); console\.log\(test\); </script>

そうすると、JSコンソールには以下の通り表示されました。

text初期値

よって、やはりCoffeeScriptとViewの接続がうまくいっていないように思えます。

【実験③:applicasion.jsに書いて実験】

本来は推奨されないと読んだのですが、AssetPipelineに問題があるのかと思い、application.jsに実験①と同様のコードを書いた実験も行いました。
しかし、結果はundifinedとなりました。
ですので、原因はView←→CoffeeScriptにありそうです。

せっかくご回答いただきましたのに、別の所に原因がありまして大変申し訳ございませんでした。
ご回答をいただきましてから本原因の調査もしてみたのですが、解決する情報を見つけることが出来ませんでした。
もしまだお付き合いいただけましたら、本原因もご存知でしたら、ご教授いただけると幸いです。

環境はmacにvagrantで作ったcentos環境を使用しており、今回が初railsですのでgemなどは足りないものが出てきたらググッて追加しているところであります。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 4

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