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

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

新規登録して質問してみよう
ただいま回答率
85.50%
プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

jQuery

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

Ruby on Rails 4

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5612閲覧

Ruby on Rails で jQuery を利用した場合の値取得方法について

EzrealTrueshot

総合スコア388

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

jQuery

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

Ruby on Rails 4

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/08 07:44

他の質問サイトにて同じ内容を聞いてみたのですが、1週間以上何の回答もないためteratailの皆様から教えて頂けないかと思い質問します。

テキストをクリックしたときに、背景の色を変更させるということをjQueryで行っております。
(下記テストページにてご確認頂けます)

http://45.62.253.224/

html

<p id='apple'>apple</p> <p id='banana'>banana</p> <p id='cake'>cake</p> <input type="submit" value="OK">

jQuery

$(document).on('click','#apple',function(){ console.log($(this).css("background-color") ); if($(this).css('background-color')=='rgb(255, 0, 0)' ){ $(this).css({'background-color':'white','color':'black'}); }else{ $(this).css({'background-color':'red','color':'black'}); } }); $(document).on('click','#banana',function(){ console.log($(this).css("background-color") ); if($(this).css('background-color')=='rgb(255, 0, 0)' ){ $(this).css({'background-color':'white','color':'black'}); }else{ $(this).css({'background-color':'red','color':'black'}); } }); $(document).on('click','#cake',function(){ console.log($(this).css("background-color") ); if($(this).css('background-color')=='rgb(255, 0, 0)' ){ $(this).css({'background-color':'white','color':'black'}); }else{ $(this).css({'background-color':'red','color':'black'}); } });

[OK]ボタンを押下したときに、色を変更した部分の要素(apple,banana,cake)を取得してrailsのコントローラー上へ送り、データベース(rails付属のsqlite)上へ保存したいのですが、どうしたらよろしいでしょうか?

POSTで送るとした時に、homeコントローラーのhogeアクションがありFugaというモデルがあった場合
下記のようになるのかなと思うのですが、*1部分が分からず困っております。

html

<p id='apple'>apple</p> <p id='banana'>banana</p> <p id='cake'>cake</p> <input type="submit" value="OK"> *1 ここで、OKボタンを押すときにどうやって「選択されたテキストだけのid値」を取得することができるのか?

homeコントローラー

def hoge @fuga = Fuga.new() @fuga.value = ここに背景が赤くなった要素 *1 @fuga.save end

どうしたらトップページの[OK]ボタンを押下した時に、背景が赤い要素(idの値)を取得することができますでしょうか?

ご助言頂けましたら幸いです。

伝えベタのためうまく伝わっていませんでしたら何でも回答いたしますので、ご返信いただけませんでしょうか?
よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

普通、submitボタンのクリックをイベントとして取ろうとしたときは、submitボタンが含まれるフォームタグのon('submit')イベントを取るのが正しいと思いますが、ソースには肝心のフォームが存在してません。
となれば、submitボタンのクリックイベントをフックするしかありませんが、対象となるsubmitボタンを一意に取得するためのIDもありません。
しょうがないので、同一ページ内にはsubmitボタンが他に存在しない前提で、submitボタンのクリックイベントを取得してそこをスタート地点にするしかないです。

Javascript

1$("input[type = 'submit']").on('click', function() { 2 // ここで次の処理をする 3});

さて、処理開始のイベントが決まったので、問題のデータを取得するための処理をする訳ですが、選択されているかどうかの判断は、背景色が変わっているかしか判断の方法がありません。

javascript

1var result = 'none'; 2if ($("#apple").css["background-color"] == 'red') { 3 result = 'apple'; 4} else if ($("#banana").css["background-color"] == 'red') { 5 result = 'banana'; 6} else if ($("#cake").css["background-color"] == 'red') { 7 result = 'cake'; 8}

これで無事送信しなければならないデータの取得が出来ました。
次に行わなければならないのは、POSTでサーバーにデータを送る事です。
POSTで送るだけなので、投げっぱなしで後の処理は必要ないでしょう。

Javascript

1// サーバーで受け取るURLは、homeコントローラのhogeアクションなので、'home/hoge'と仮定、 2$.post('home/hoge', {id: result});

サーバー側の処理は後述しますが、全部くっつけるとこうなります。

Javascript

1$("input[type = 'submit']").on('click', function() { 2 var result = 'none'; 3 if ($("#apple").css["background-color"] == 'red') { 4 result = 'apple'; 5 } else if ($("#banana").css["background-color"] == 'red') { 6 result = 'banana'; 7 } else if ($("#cake").css["background-color"] == 'red') { 8 result = 'cake'; 9 } 10 $.post('home/hoge', {id: result}); 11});

ですが、これ、非常にわかりにくいと思いませんか?
やりたい事は、
1.特定の要素をクリックして送信するIDを選択(選択された要素の色を変える)
2.選択されたIDをPOSTでサーバーに送信
たったこれだけです。
私なら、こういう風にします。

html

1<!-- html.erbで記述(RailsのViewに書かれているとします) --> 2<!-- データ送信フォームを作成。このフォームだと、hiddenフィールドの値がhoge_home_pathに送信される --> 3<!-- home/hogeにPOSTでフォームを送信するフォームタグが生成される --> 4<%= form_tag hoge_home_path, method: :post do %> 5 <!-- javascroptのイベントを取得するために、クリックを取得したいタグ全部に同じclassを指定 --> 6 <!-- 共通のイベントで内容のデータを取得するためにdata属性を定義しておく --> 7 <p class="send_data_selection" data-send-id="apple">リンゴ</p> 8 <p class="send_data_selection" data-send-id="banana">バナナ</p> 9 <p class="send_data_selection" data-send-id="cake">ケーキ</p> 10 <input type="hidden" name='id" id="send_data" /> 11 <input type="submit" value='OK'> 12<% end %>

Javascript

1$(".send_data_selection").on('click', function() { 2 var target = $(this); 3 // 先に選択されていたものをキャンセルして色を戻しておく 4 $.each(".send_data_selection", function() { 5 $(this).css({'background-color':'white','color':'black'}); 6 }); 7 // 対象となる要素の背景色を選択されたものに変更 8 target.css({'background-color':'red','color':'black'}); 9 // クリックされた要素の指定するIDを取得 10 var result = target.data("send-id"); 11 // hiddenフィールドの値を変更 12 $("#send_data").val(result); 13});

これで、要素をクリックすると背景色を変更して、hiddenフィールドにデータを格納してくれるので、
あとはsubmitのデフォルトの動作でサーバーにPOSTしてもらうだけです。
すっきりしたでしょ?
ここまで来ればサーバーの方は何も考えなくても出来ますよね?

Ruby

1def hoge 2 @fuga = Fuga.new 3 @fuga.value = params[:id] 4 @fuga.save 5end

わーっと書いたので、JQueryのところ、もしかするとエラーが混じっているかもしれませんが、流れや問題点はわかってもらえたかと思います。

投稿2016/07/09 03:15

rifuch

総合スコア1901

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

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

EzrealTrueshot

2016/07/09 06:45 編集

回答ありがとうございます。 とてもわかりやすいです! 流れや問題点が非常に良く分かりました。 hidden部分のvalueの値の書き換えにテクニックを感じました。 ありがとうございます! まだ、ソースを読んだだけで実際にコーディングして試していないのでわかりませんが「複数選択」されたときの挙動とかどうなるのかな(配列で渡せるのかな?)と思いましたがこれは試行錯誤してトライしてみようと思います。 こんなにわかりやすい回答は初めてです。 ありがとうございました! var result = target.data("send-id"); は var result = target.data("data-send-id"); ですかね?試してみます!
rifuch

2016/07/09 08:49

複数選択の時も、少し勉強すればやり方はすぐに複数思いつくと思いますので、どのやり方が一番わかりやすく(たとえば来月見たときにすぐわかるか)、無駄な負荷がかからないか等で選択してみてください。 (たとえば、クリックイベントでhidden_fieldを追加するとか、区切り付き文字列でパラメータを飛ばし、サーバーで分割するとか) var result = target.data("send-id"); で大丈夫です。 var result = target.attr("data-send-id"); と同じですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問