teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ajax errorになる、リアルタイムの絞り込み検索で

編集履歴

質問編集履歴

2

質問事項を書き直し

2020/05/06 15:46

投稿

Natsu9999
Natsu9999

スコア20

test CHANGED
@@ -1 +1 @@
1
- wordpress AJAXをつかって検索の絞り込みをリアルタイムで実行したい
1
+ ajax errorになる、リアルタイムの絞り込み検索で
test CHANGED
@@ -1,171 +1,251 @@
1
+ wordpressを利用しています。
2
+
3
+
4
+
5
+ Q1 A1 A2 A3
6
+
7
+ Q2 A2 A2 A3
8
+
9
+ Q3 A1 A2 A3
10
+
11
+ Q4 A1 A2 A3
12
+
13
+
14
+
15
+ Qはカスタムフィールド
16
+
17
+ Aはチェックボックスとなっております。
18
+
19
+
20
+
21
+ https://sim.hyouban-hikaku.com/
22
+
23
+ ここのサイトにあるような絞り込み検索をしたいです。
24
+
25
+
26
+
1
- ソートについては下記コードで実装できたが、
27
+ 下記の様なコードを書いたのですが、
2
-
28
+
3
- これをsqlからとってきて結果に反映されるようにしたいがやり方がわからない。
29
+ 結果、エラーが起こりました。お手数ですがページの再読み込みを行ってください。
30
+
4
-
31
+ の部分が出力されました。
32
+
33
+
34
+
5
-
35
+ どこがおかしいのかわからずです。
36
+
6
-
37
+ すいませんがご教授お願いします。
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+ ```function.php
46
+
47
+ function call_post(){
48
+
49
+
50
+
51
+ // Getting the ajax data:
52
+
53
+ // An array of keys("name")/values of each "checked" checkbox
54
+
55
+ $choices = $_POST['choices'];
56
+
57
+
58
+
59
+ $meta_query = array('relation' => 'OR');
60
+
61
+ foreach($choices as $Key=>$Value){
62
+
63
+
64
+
65
+ if(count($Value)){
66
+
67
+ foreach ($Value as $Inkey => $Invalue) {
68
+
69
+ $meta_query[] = array( 'key' => $Key, 'value' => $Invalue, 'compare' => '=' );
70
+
71
+ }
72
+
73
+ }
74
+
75
+ }
76
+
77
+ $args = array(
78
+
79
+ 'post_type' => 'post',
80
+
81
+ 'meta_query' =>$meta_query
82
+
83
+ );
84
+
85
+
86
+
87
+ $query = new WP_Query($args);
88
+
89
+ //if( ! empty ($params['template'])) {
90
+
91
+ ////$template = $params['template'];
92
+
93
+ if( $query->have_posts() ) :
94
+
7
- やりたいのは非同期で、検索ボタンを押さずとも、絞り込みのチェックボックスを入れたときに結果が表示される
95
+ while( $query->have_posts() ): $query->the_post();
96
+
97
+ get_the_title($query->posts);
98
+
99
+ endwhile;
100
+
101
+ wp_reset_query();
102
+
103
+ else :
104
+
105
+ wp_send_json($query->posts);
106
+
107
+ endif;
108
+
109
+ //}
110
+
111
+
112
+
113
+ die();
114
+
115
+ }
116
+
117
+ add_action('wp_ajax_call_post', 'call_post');
8
118
 
9
119
 
10
120
 
11
121
  ```
12
122
 
13
- $j=jQuery;
14
-
15
- $j(function(){
16
-
17
- $j('.search_frame input[type="checkbox"]').on('change',function(){
18
-
19
- filter();
20
-
21
- });
22
-
23
-
24
-
25
- function filter(){
26
-
27
- console.log('----------------------');
28
-
29
- // 検索条件を取得
30
-
31
- var condition=[];
32
-
33
- $j('.search_frame>div.cols').each(function(){
34
-
35
- idx=$j(this).index();
36
-
37
- selected_item="";
38
-
39
- $j('input[type="checkbox"]:checked',this).each(function(){
40
-
41
- selected_item+=$j(this).next().text()+',';
42
-
43
- })
44
-
45
- selected_item=selected_item.replace(/,$/,'');
46
-
47
- condition.push(selected_item);
123
+
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+ ```jsファイル
136
+
137
+ jQuery(document).ready(function($){
138
+
139
+ $('.search_frame input').change(function(){
140
+
141
+
142
+
143
+ // declaring an array
144
+
145
+ var choices = {};
146
+
147
+
148
+
149
+ $('.filter-output').remove();
150
+
151
+ $('.filter-output').empty()
152
+
153
+
154
+
155
+ $('input[type=checkbox]:checked').each(function() {
156
+
157
+ if (!choices.hasOwnProperty(this.name))
158
+
159
+ choices[this.name] = [this.value];
160
+
161
+ else
162
+
163
+ choices[this.name].push(this.value);
164
+
165
+ });
166
+
167
+
168
+
169
+
170
+
171
+ console.log(choices);
172
+
173
+ $.ajax({
174
+
175
+ type: "POST",
176
+
177
+ url: ajaxurl,
178
+
179
+ data: {
180
+
181
+ // データ受け渡し
182
+
183
+ 'action' : 'call_post', // the php name function
184
+
185
+ 'choices' : choices,
186
+
187
+ },
188
+
189
+ success: function( response ) {
190
+
191
+ $('.result .loading').remove();
192
+
193
+ jsonData = JSON.parse( response );
194
+
195
+ var count = jsonData.length;
196
+
197
+ if ( count == '0' ) {
198
+
199
+ // 検索結果がない場合
200
+
201
+ $('.result').append('<li>検索結果がありません。</li>');
202
+
203
+ } else {
204
+
205
+ // リストに出力
206
+
207
+ $.each( jsonData, function( i, val ) {
208
+
209
+ $('.result').append('<li><a href="' + val['permalink'] + '">' + val['post_title'] + '</a></li>');
210
+
211
+ });
212
+
213
+ }
214
+
215
+ click_flag = true;
216
+
217
+ },
218
+
219
+ error: function( response ) {
220
+
221
+ // ajaxエラーの場合
222
+
223
+ $('.result .loading').remove();
224
+
225
+ $('.result').append('<li>エラーが起こりました。お手数ですがページの再読み込みを行ってください。</li>');
226
+
227
+ click_flag = true;
228
+
229
+ }
230
+
231
+ });
232
+
233
+ })
48
234
 
49
235
  });
50
236
 
51
237
 
52
238
 
53
- // 各サークルについて判別
54
-
55
- cnt=0;
56
-
57
- $j('.search_content .item').each(function(){
58
-
59
- genre=$j('div:nth-of-type(2)',this).html();
60
-
61
- place=$j('div:nth-of-type(3)',this).html();
62
-
63
- frequency=$j('div:nth-of-type(4)',this).html();
64
-
65
- people=$j('div:nth-of-type(5)',this).html();
66
-
67
- var tf=[];
68
-
69
-
70
-
71
- // ジャンル
72
-
73
- tf[0]=true;
74
-
75
- if(condition[0]!="" && condition[0].indexOf(genre)==-1){tf[0]=false;}
76
-
77
-
78
-
79
- // 活動場所
80
-
81
- tf[1]=true;
82
-
83
- if(condition[1]!=""){
84
-
85
- if(place=='農学部' || place=='工学部'){
86
-
87
- if(condition[1].indexOf(place)==-1){tf[1]=false;}
88
-
89
- }else{
90
-
91
- if(condition[1].indexOf('その他')==-1){tf[1]=false;}
92
-
93
- }
94
-
95
- }
96
-
97
-
98
-
99
- // 頻度
100
-
101
- tf[2]=true;
102
-
103
- if(condition[2]!="" && condition[2].indexOf(frequency)==-1){tf[2]=false;}
104
-
105
-
106
-
107
- // 人数
108
-
109
- tf[3]=false;
110
-
111
- if(condition[3].indexOf('～10人')>-1){
112
-
113
- if(people<=10){tf[3]=true;}
114
-
115
- }
116
-
117
- if(condition[3].indexOf('11～30人')>-1){
118
-
119
- if(11<=people && people<=30){tf[3]=true;}
120
-
121
- }
122
-
123
- if(condition[3].indexOf('31人～50人')>-1){
124
-
125
- if(31<=people && people<=50){tf[3]=true;}
126
-
127
- }
128
-
129
- if(condition[3].indexOf('51人～')>-1){
130
-
131
- if(51<=people){tf[3]=true;}
132
-
133
- }
134
-
135
- if(condition[3]==""){tf[3]=true;}
136
-
137
-
138
-
139
-
140
-
141
- // 表示・非表示
142
-
143
- if(tf[0] && tf[1] && tf[2] && tf[3]){
144
-
145
- cnt+=1;
146
-
147
- $j(this).css('display','flex');
148
-
149
- }else{
150
-
151
- console.log('NG');
152
-
153
- $j(this).css('display','none');
154
-
155
- }
156
-
157
- });
158
-
159
- $j('.search_count').html(cnt+'件');
160
-
161
- }
162
-
163
-
164
-
165
- filter();
166
-
167
- });
168
-
169
-
170
-
171
239
  ```
240
+
241
+
242
+
243
+
244
+
245
+
246
+
247
+ ```出力するタグ
248
+
249
+ <div class="result"></div>
250
+
251
+ ```

1

詳しく記載しました

2020/05/06 15:46

投稿

Natsu9999
Natsu9999

スコア20

test CHANGED
@@ -1 +1 @@
1
- wordpress $argの連想配列のvalueにarrayが入っているが変数使うとうまくいかない
1
+ wordpress AJAXをつかって検索の絞り込みをリアルタイムで実行したい
test CHANGED
@@ -1,5 +1,171 @@
1
- [hoegg => huga]
1
+ ソートについては下記コードで実装できたが、
2
2
 
3
- とやりたいけど
3
+ これをsqlからとってきて結果に反映されるようにしたいがやり方がわからない。
4
4
 
5
+
6
+
7
+ やりたいのは非同期で、検索ボタンを押さずとも、絞り込みのチェックボックスを入れたときに結果が表示される
8
+
9
+
10
+
11
+ ```
12
+
13
+ $j=jQuery;
14
+
5
- {hoge:huga}になる
15
+ $j(function(){
16
+
17
+ $j('.search_frame input[type="checkbox"]').on('change',function(){
18
+
19
+ filter();
20
+
21
+ });
22
+
23
+
24
+
25
+ function filter(){
26
+
27
+ console.log('----------------------');
28
+
29
+ // 検索条件を取得
30
+
31
+ var condition=[];
32
+
33
+ $j('.search_frame>div.cols').each(function(){
34
+
35
+ idx=$j(this).index();
36
+
37
+ selected_item="";
38
+
39
+ $j('input[type="checkbox"]:checked',this).each(function(){
40
+
41
+ selected_item+=$j(this).next().text()+',';
42
+
43
+ })
44
+
45
+ selected_item=selected_item.replace(/,$/,'');
46
+
47
+ condition.push(selected_item);
48
+
49
+ });
50
+
51
+
52
+
53
+ // 各サークルについて判別
54
+
55
+ cnt=0;
56
+
57
+ $j('.search_content .item').each(function(){
58
+
59
+ genre=$j('div:nth-of-type(2)',this).html();
60
+
61
+ place=$j('div:nth-of-type(3)',this).html();
62
+
63
+ frequency=$j('div:nth-of-type(4)',this).html();
64
+
65
+ people=$j('div:nth-of-type(5)',this).html();
66
+
67
+ var tf=[];
68
+
69
+
70
+
71
+ // ジャンル
72
+
73
+ tf[0]=true;
74
+
75
+ if(condition[0]!="" && condition[0].indexOf(genre)==-1){tf[0]=false;}
76
+
77
+
78
+
79
+ // 活動場所
80
+
81
+ tf[1]=true;
82
+
83
+ if(condition[1]!=""){
84
+
85
+ if(place=='農学部' || place=='工学部'){
86
+
87
+ if(condition[1].indexOf(place)==-1){tf[1]=false;}
88
+
89
+ }else{
90
+
91
+ if(condition[1].indexOf('その他')==-1){tf[1]=false;}
92
+
93
+ }
94
+
95
+ }
96
+
97
+
98
+
99
+ // 頻度
100
+
101
+ tf[2]=true;
102
+
103
+ if(condition[2]!="" && condition[2].indexOf(frequency)==-1){tf[2]=false;}
104
+
105
+
106
+
107
+ // 人数
108
+
109
+ tf[3]=false;
110
+
111
+ if(condition[3].indexOf('～10人')>-1){
112
+
113
+ if(people<=10){tf[3]=true;}
114
+
115
+ }
116
+
117
+ if(condition[3].indexOf('11～30人')>-1){
118
+
119
+ if(11<=people && people<=30){tf[3]=true;}
120
+
121
+ }
122
+
123
+ if(condition[3].indexOf('31人～50人')>-1){
124
+
125
+ if(31<=people && people<=50){tf[3]=true;}
126
+
127
+ }
128
+
129
+ if(condition[3].indexOf('51人～')>-1){
130
+
131
+ if(51<=people){tf[3]=true;}
132
+
133
+ }
134
+
135
+ if(condition[3]==""){tf[3]=true;}
136
+
137
+
138
+
139
+
140
+
141
+ // 表示・非表示
142
+
143
+ if(tf[0] && tf[1] && tf[2] && tf[3]){
144
+
145
+ cnt+=1;
146
+
147
+ $j(this).css('display','flex');
148
+
149
+ }else{
150
+
151
+ console.log('NG');
152
+
153
+ $j(this).css('display','none');
154
+
155
+ }
156
+
157
+ });
158
+
159
+ $j('.search_count').html(cnt+'件');
160
+
161
+ }
162
+
163
+
164
+
165
+ filter();
166
+
167
+ });
168
+
169
+
170
+
171
+ ```