teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

追記

2020/07/06 04:04

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -177,4 +177,50 @@
177
177
  replaceChildrenOptions = ->に飛びません。
178
178
  replaceChildrenOptions = ->の真下にalertで確認しました。
179
179
 
180
- ここからまったく分かりません・・・。
180
+ ここからまったく分かりません・・・。
181
+
182
+
183
+ ***************************************************
184
+ htmlを追加
185
+ ***************************************************
186
+ 出力されてるhtmlを追記致します
187
+
188
+ ```html
189
+
190
+ <select class="select-parent" name="search[category_id]" id="search_category_id">
191
+ <option value=""></option>
192
+ <option data-children-path="/categories/1/sub_categories" value="1">野菜</option>
193
+ <option data-children-path="/categories/2/sub_categories" value="2">果物</option>
194
+ <option data-children-path="/categories/3/sub_categories" value="3">お肉</option>
195
+ <option data-children-path="/categories/4/sub_categories" value="4">魚介</option>
196
+ </select>
197
+
198
+ <select class="select-children" name="search[sub_category_id]" id="search_sub_category_id">
199
+ <option value=""></option>
200
+ <option value="1">キャベツ</option>
201
+ <option value="2">人参</option>
202
+ <option value="3">玉ねぎ</option>
203
+ <option value="4">ブロッコリー</option>
204
+ <option value="5">もやし</option>
205
+ <option value="6">レタス</option>
206
+ <option value="7">トマト</option>
207
+ </select>
208
+
209
+ ```
210
+
211
+ 以下は登録画面のhtmlです。
212
+ こちらでも同じセレクトボックス連動を使用しており、こちらは正常に動作済みです。
213
+ ```html
214
+
215
+ <select class="select-parent" name="item[category_id]" id="item_category_id">
216
+ <option value="">選択して下さい</option>
217
+ <option data-children-path="/categories/1/sub_categories" value="1">野菜</option>
218
+ <option data-children-path="/categories/2/sub_categories" value="2">果物</option>
219
+ <option data-children-path="/categories/3/sub_categories" value="3">お肉</option>
220
+ <option data-children-path="/categories/4/sub_categories" value="4">魚介</option>
221
+ </select>
222
+
223
+ <select class="select-children" name="item[sub_category_id]" id="item_sub_category_id">
224
+ <option value="">選択して下さい</option>
225
+ </select>
226
+ ```

4

調べたこと

2020/07/06 04:04

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -160,4 +160,21 @@
160
160
 
161
161
  $('.select-parent').on
162
162
  'change': replaceChildrenOptions
163
- ```
163
+ ```
164
+
165
+
166
+ ***************************************************
167
+ 分かった所までを追加
168
+ ***************************************************
169
+ その後分かった所までを追記致します。
170
+
171
+ エラーログはブラウザ、サーバともに出てませんでした。
172
+
173
+ ただ、正常な流れは、
174
+ 親(Category)のセレクトボックスを変更で
175
+ スクリプトのreplaceChildrenOptions = ->に飛ぶのに対し、
176
+ 今回のこの画面は、
177
+ replaceChildrenOptions = ->に飛びません。
178
+ replaceChildrenOptions = ->の真下にalertで確認しました。
179
+
180
+ ここからまったく分かりません・・・。

3

追記

2020/07/06 03:42

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -104,4 +104,60 @@
104
104
 
105
105
  end
106
106
 
107
+ ```
108
+
109
+
110
+ ***************************************************
111
+ 不足情報を追加
112
+ ***************************************************
113
+ コントローラ
114
+ ```ruby
115
+
116
+ class SubCategoriesController < ApplicationController
117
+ def index
118
+
119
+ @sub_categories = SubCategory.where(category_id: params[:category_id])
120
+
121
+ respond_to do |format|
122
+ format.html do
123
+ end
124
+
125
+ format.js do
126
+ render json: @sub_categories.select(:id, :name)
127
+ end
128
+ end
129
+
130
+ end
131
+ end
132
+
133
+ ```
134
+
135
+ coffeescript
136
+ ```coffeescript
137
+ $(document).on 'turbolinks:load', ->
138
+ replaceSelectOptions = ($select, results) ->
139
+ $select.html $('<option>')
140
+ $.each results, ->
141
+ option = $('<option>').val(this.id).text(this.name)
142
+ $select.append(option)
143
+
144
+ replaceChildrenOptions = ->
145
+ childrenPath = $(@).find('option:selected').data().childrenPath
146
+ $selectChildren = $(@).closest('form').find('.select-children')
147
+ if childrenPath?
148
+ $.ajax
149
+ url: childrenPath
150
+ dataType: "json"
151
+ success: (results) ->
152
+ replaceSelectOptions($selectChildren, results)
153
+ error: (XMLHttpRequest, textStatus, errorThrown) ->
154
+ console.error("Error occurred in replaceChildrenOptions")
155
+ console.log("XMLHttpRequest: #{XMLHttpRequest.status}")
156
+ console.log("textStatus: #{textStatus}")
157
+ console.log("errorThrown: #{errorThrown}")
158
+ else
159
+ replaceSelectOptions($selectChildren, [])
160
+
161
+ $('.select-parent').on
162
+ 'change': replaceChildrenOptions
107
163
  ```

2

model追加

2020/07/05 21:24

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -79,4 +79,29 @@
79
79
  default_scope -> { order(:order_number) }
80
80
  end
81
81
 
82
+ ```
83
+
84
+ アイテムモデル※検索したい対象
85
+ ```ruby
86
+ class Item < ApplicationRecord
87
+
88
+ belongs_to :category
89
+ belongs_to :sub_category
90
+
91
+
92
+ scope :search, ->(search_params) do
93
+ return if search_params.blank?
94
+
95
+ keyword_like(search_params[:keyword])
96
+ .category_id_is(search_params[:category_id])
97
+ .sub_category_id_is(search_params[:sub_category_id])
98
+ end
99
+ scope :keyword_like, -> (keyword) { where('description LIKE ? or title LIKE ?', "%#{keyword}%","%#{keyword}%") if keyword.present? }
100
+ scope :category_id_is, -> (category_id) { where(category_id: category_id) if category_id.present? }
101
+ scope :sub_category_id_is, -> (sub_category_id) { where(sub_category_id: sub_category_id) if sub_category_id.present? }
102
+
103
+
104
+
105
+ end
106
+
82
107
  ```

1

カテゴリとサブカテゴリのモデルを追記

2020/07/05 04:28

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -54,4 +54,29 @@
54
54
  して
55
55
  @itemを渡してあげるべきなのでしょうか?
56
56
 
57
- 初心者につき的外れの質問しているかもしれませんが、どうかアドバイス宜しくお願いします。
57
+ 初心者につき的外れの質問しているかもしれませんが、どうかアドバイス宜しくお願いします。
58
+
59
+
60
+ ***************************************************
61
+ ご指摘により
62
+ 以下から不足情報を追加
63
+ ***************************************************
64
+
65
+ カテゴリモデル
66
+ ```ruby
67
+ class Category < ApplicationRecord
68
+ has_many :sub_categories
69
+ has_many :items
70
+ default_scope -> { order(:order_number) }
71
+ end
72
+
73
+ ```
74
+ サブカテゴリモデル
75
+ ```ruby
76
+ class SubCategory < ApplicationRecord
77
+ belongs_to :category
78
+ has_many :items
79
+ default_scope -> { order(:order_number) }
80
+ end
81
+
82
+ ```