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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

1回答

4067閲覧

fields_forにより生成される連番idを取得、ワイルドカード指定したいけど分からない

begenner

総合スコア79

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/12/16 11:14

編集2022/01/12 10:55

###実現したいこと
id の中央に位置する連番に対して番号を取得、ワイルドカードを指定してjsのコード量を少なくしたいです。
ご教授いただきますようよろしくお願いいたします(m_ _m)

参考にしようとしたサイト
jQueryでclassやidをワイルドカード指定

###問題点
上記のサイトを参考にjqueryのワイルドカードを利用してモデルからjsonでデータを参照したいのですが
Railsのform_forとf.fields_forを使用するとfields_forメソッドによりidの数字の連番の位置が

<親モデル(単数系)>_<子モデル(単数系)>atributes_0<子モデルのカラム名>
となってしまいワイルドカードが使えるかわからない
例)
xxx_atributes_0_yyy
xxx_atributes_1_yyy
xxx_atributes_2_yyy
.      ↑ここにきてしまう仕様になっている

###試したこと

ruby の eachメソッドでループ回数が必要な場合 (for文のiのような)

のサイトのように fields_forのyyyに対してブロックの中で s を連番として当てられないかと試しましたができませんでした。

###動作環境
OS:mac
Ruby:2.3.5
Ruby on Rails: 4.2.5
##コード
view部分

ruby

1<%= form_for (@xxx) do |f|%> 2 <%= f.fields_for :yyy do | yyy, s | %> 3.           <%= yyy.text_field 'code_no' %> 4.           <%= yyy.text_field 'part_number' %> 5 <% end %> 6  <div class="actions"> 7 <%= f.submit @submit %> 8 </div> 9<% end %>

js部分(jquery混同しています)

javascript

1 $('#xxx_yyy_attributes_' + s + '_code_no').change(function () { 2 var input = ($(this).val()); 3 $.ajax({ 4 url: '/xxxes/search_product', 5 type: 'GET', 6 data: ('keyword=' + input), 7 processData: false, 8 contentType: false, 9 dataType: 'json' 10 }) 11 .done(function(data){ 12 $(data).each(function(i, product){ 13 $("#xxx_yyy_attributes_" + s + "_part_number").val(product.part_number) 14 }); 15 }); 16 });

controller部分

ruby

1class XxxesController < ApplicationController 2 3 # GET /xxxes/new 4 def new 5 @xxx = Xxx.new 6 7 (1..10).each do |num| 8 @xxx.yyy.build 9 end 10 end 11 12 # jsonでデータを取得する 13 def search_product 14 @product = Product.where('code_no LIKE(?)', "#{params[:keyword]}") 15 render json: @product 16 end 17. 18. 19 20end 21

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

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

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

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

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

guest

回答1

0

Selectors API にワイルドカードはないので、前方一致と後方一致をANDする事になります。

JavaScript

1document.querySelectorAll('[id^="xxx_atributes_"][id$="_yyy"]'); 2jQuery('[id^="xxx_atributes_"][id$="_yyy"]');

Re: tshr さん

投稿2017/12/16 14:35

think49

総合スコア18156

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

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

begenner

2017/12/16 16:51

ご回答いただきありがとうございます!! 早速試してみたところ、1つのjsイベントのコードでかなりの量のコードを削除できそうで大変助かります。 ただ、問題点が1つ出まして、 .done(function(data)のイベントのid部分を $('[id^="order_orderdetails_attributes_"][id$="_part_number"]').val(product.part_number) に変更したところ、連番idが違うだけの他ののテキストボックス全てに値が適用されてしまいました。 jsのコードを var strId = 0; $('[id^="order_orderdetails_attributes_"][id$="_code_no"]').change(function () { //idを取得 var str = $(this).attr('id'); // devtoolで確認 console.log(str); var f_slice = str.slice(29); console.log(f_slice); strId = f_slice.slice(0, -8); console.log(strId); var input = ($(this).val()); $.ajax({ url: '/orders/search_product', type: 'GET', data: ('keyword=' + input), processData: false, contentType: false, dataType: 'json' }) .done(function(data){ $(data).each(function(i, product){ $('#order_orderdetails_attributes_' + strId + '_product_name').val(product.part_number) $('#order_orderdetails_attributes_' + strId + '_product_name').val(product.part_name) }); }); }); としてみましたが、動作しませんでした(m_ _m) さすがに特定のidのテキストボックスにだけ表示させるのは難しいのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問