質問編集履歴
2
質問事項を書き直し
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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
|
-
こ
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
c
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
$
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
co
|
|
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
詳しく記載しました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
wordpress
|
|
1
|
+
wordpress AJAXをつかって検索の絞り込みをリアルタイムで実行したい
|
test
CHANGED
|
@@ -1,5 +1,171 @@
|
|
|
1
|
-
|
|
1
|
+
ソートについては下記コードで実装できたが、
|
|
2
2
|
|
|
3
|
-
とやり
|
|
3
|
+
これをsqlからとってきて結果に反映されるようにしたいがやり方がわからない。
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
やりたいのは非同期で、検索ボタンを押さずとも、絞り込みのチェックボックスを入れたときに結果が表示される
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
$j=jQuery;
|
|
14
|
+
|
|
5
|
-
{
|
|
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
|
+
```
|