teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問編集画面にて、カテゴリーを変更したら親子孫がリセットされる様にしたい

編集履歴

質問編集履歴

4

修正

2020/09/17 13:45

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
@@ -1 +1 @@
1
- 編集画面にて、ancestryで親、子、孫全てのカテゴリーを取得し、表示したい
1
+ 編集画面にて、カテゴリーを変更したら親子孫がリセットされる様にしたい
test CHANGED
@@ -8,13 +8,17 @@
8
8
 
9
9
  # 解決したいこと
10
10
 
11
- ancestryで、カテゴリを取得したい
11
+ カテゴリの変更で、既存のカテゴリを削除したい。
12
-
13
-
14
-
12
+
13
+
14
+
15
+
16
+
15
- 親、子、孫で、孫と子は取得できましたが、親の取得ができません...。
17
+ #仮説
16
-
18
+
17
- rootの記述で取得できたと思うのですが、どのように記述すれば良いでしょうか？
19
+ カテゴリーが変更された時にenptyメソッド等で既存のカテゴリーを空にすればよいのでは？と仮説を立てた。
20
+
21
+
18
22
 
19
23
 
20
24
 
@@ -24,31 +28,209 @@
24
28
 
25
29
 
26
30
 
31
+ .sell-new
32
+
33
+ .sell-new__wrapper
34
+
35
+ .sell-new__wrapper__form
36
+
37
+ = form_for @item do |f|
38
+
39
+ %ul
40
+
41
+ - @item.errors.full_messages.each do |message|
42
+
43
+ %li= message
44
+
45
+ .sell-new__wrapper__form__field.append__category
46
+
47
+ = f.label :"カテゴリー"
48
+
49
+ %span.sell-new__wrapper__form__field__attention 必須
50
+
51
+ %br/
52
+
53
+ =f.collection_select :category_id, @item.category.root.siblings, :id, :name, class:"serect_field"
54
+
55
+ =f.collection_select :category_id, @item.category.parent.siblings, :id, :name, class:"serect_field"
56
+
57
+ =f.collection_select :category_id, @item.category.siblings, :id, :name, class:"serect_field"
58
+
59
+
60
+
27
61
  //省略
28
62
 
29
-
30
-
31
-
32
-
33
- =f.collection_select :category_id, @item.category.root, :id, :name, class:"serect_field"
34
-
35
- =f.collection_select :category_id, @item.category.parent.siblings, :id, :name, class:"serect_field"
36
-
37
- =f.collection_select :category_id, @item.category.siblings, :id, :name, class:"serect_field"
38
-
39
63
 
40
64
 
41
- ``
65
+ ```
42
-
43
-
44
-
66
+
67
+
68
+
45
- 一番上の記述が分かりません。
69
+ items_edit.js
70
+
46
-
71
+ こちらは、出品機能のjsをコピーしたものです。
72
+
73
+ ```
74
+
75
+ $(document).on('turbolinks:load', ()=> {
76
+
77
+ function appendOption(category){
78
+
79
+ var html = `<option value="${category.id}">${category.name}</option>`;
80
+
81
+ return html;
82
+
83
+ }
84
+
85
+ function appendChildrenBox(insertHTML){
86
+
87
+ var childSelectHtml = "";
88
+
89
+ childSelectHtml = `<div class="category__child" id="children_wrapper">
90
+
91
+ <select id="child__category" name="item[category_id]" class="serect_field">
92
+
93
+ <option value="">---</option>
94
+
95
+ ${insertHTML}
96
+
97
+ </select>
98
+
99
+ </div>`;
100
+
101
+ $('.append__category').append(childSelectHtml);
102
+
103
+ }
104
+
105
+ function appendGrandchildrenBox(insertHTML){
106
+
107
+ var grandchildSelectHtml = "";
108
+
109
+ grandchildSelectHtml = `<div class="category__child" id="grandchildren_wrapper">
110
+
111
+ <select id="grandchild__category" name="item[category_id]" class="serect_field">
112
+
113
+ <option value="">---</option>
114
+
115
+ ${insertHTML}
116
+
117
+ </select>
118
+
119
+ </div>`;
120
+
121
+ $('.append__category').append(grandchildSelectHtml);
122
+
123
+ }
124
+
125
+
126
+
127
+ $('#item_category_id').on('change',function(){
128
+
129
+ var parentId = document.getElementById('item_category_id').value;
130
+
131
+ if (parentId != ""){
132
+
133
+ $.ajax({
134
+
135
+ url: '/items/get_category_children/',
136
+
137
+ type: 'GET',
138
+
47
- @item.category.parent.root
139
+ data: { parent_id: parentId },
140
+
48
-
141
+ dataType: 'json'
142
+
49
-
143
+ })
144
+
50
-
145
+ .done(function(children){
146
+
147
+ $('#children_wrapper').remove();
148
+
149
+ $('#grandchildren_wrapper').remove();
150
+
51
- 等いろいろな記述をしてみましたが、理解不足で取得できません。
151
+ var insertHTML = '';
152
+
153
+ children.forEach(function(child){
154
+
155
+ insertHTML += appendOption(child);
156
+
157
+ });
158
+
159
+ appendChildrenBox(insertHTML);
160
+
161
+ })
162
+
163
+ .fail(function(){
164
+
165
+ alert('カテゴリー取得に失敗しました');
166
+
167
+ })
168
+
169
+ }else{
170
+
171
+ $('#children_wrapper').remove();
172
+
173
+ $('#grandchildren_wrapper').remove();
174
+
175
+ }
176
+
177
+ });
178
+
179
+ $('.append__category').on('change','#child__category',function(){
180
+
181
+ var childId = document.getElementById('child__category').value;
182
+
183
+ if(childId != "" && childId != 46 && childId != 74 && childId != 134 && childId != 142 && childId != 147 && childId != 150 && childId != 158){
184
+
185
+ $.ajax({
186
+
187
+ url: '/items/get_category_grandchildren',
188
+
189
+ type: 'GET',
190
+
191
+ data: { child_id: childId },
192
+
193
+ dataType: 'json'
194
+
195
+ })
196
+
197
+ .done(function(grandchildren){
198
+
199
+ $('#grandchildren_wrapper').remove();
200
+
201
+ var insertHTML = '';
202
+
203
+ grandchildren.forEach(function(grandchild){
204
+
205
+ insertHTML += appendOption(grandchild);
206
+
207
+ });
208
+
209
+ appendGrandchildrenBox(insertHTML);
210
+
211
+ })
212
+
213
+ .fail(function(){
214
+
215
+ alert('カテゴリー取得に失敗しました');
216
+
217
+ })
218
+
219
+ }else{
220
+
221
+ $('#grandchildren_wrapper').remove();
222
+
223
+ }
224
+
225
+ })
226
+
227
+ });
228
+
229
+ ```
230
+
231
+
232
+
233
+ 現状、既存の親子孫のカテゴリーを残したまま４つめのセレクトボックスが出現してしまいます。
52
234
 
53
235
 
54
236
 

3

修正

2020/09/17 13:45

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- =f.collection_select :category_id, @item.category.roots :id, :name, class:"serect_field"
33
+ =f.collection_select :category_id, @item.category.root, :id, :name, class:"serect_field"
34
34
 
35
35
  =f.collection_select :category_id, @item.category.parent.siblings, :id, :name, class:"serect_field"
36
36
 

2

修正

2020/09/17 13:08

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
 
44
44
 
45
+ 一番上の記述が分かりません。
46
+
45
47
  @item.category.parent.root
46
48
 
47
49
 

1

修正

2020/09/17 12:46

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -26,9 +26,9 @@
26
26
 
27
27
  //省略
28
28
 
29
- %span.sell-new__wrapper__form__field__attention 必須
30
29
 
31
- %br/
30
+
31
+
32
32
 
33
33
  =f.collection_select :category_id, @item.category.roots :id, :name, class:"serect_field"
34
34