使用多选复选框获取带有Ajax帖子过滤器的帖子 [英] Get posts with Ajax posts filter with multi selection checkboxes
本文介绍了使用多选复选框获取带有Ajax帖子过滤器的帖子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用多选复选框来实现 ajax后期过滤器。
这里我的过滤器有3个 ram 和 价格 ，每个组都有4个不同的键/值（复选框）的。可以检查组中的每个复选框（多选）
以下是此项目的实时链接，并且如果您使用浏览器控制台工具进行检查，则会看到数据正确地由jQuery发送并由我的php函数接收。
这是行得通的：
包含所有复选框的 HTML 文件工作正常用我的ajax jQuery脚本，它正确地发送一组键/值到我的php函数。我已经正确地注册了我的jQuery脚本，并且使用它以及
接收到的数据数组
$ options = array（'brand1'=>'Nokia'，'brand3 '=>'Sony'）; **`wp_localize_script（）`** ...
什么还没有工作：
- 准备WP_query（）
- 查询本身$ args数组
如何管理call_post（）函数，之后它从JS获取值，并使用循环展示帖子** **
function.php中的PHP代码：
add_action（'wp_ajax_call_post'，'call_post'）;
add_action（'wp_ajax_nopriv_call_post'，'call_post'）;
function call_post（）{
$ choices = $ _POST ['choices'];
print_r（$ _ POST ['choices']）;
foreach（$ options as $ name => $ choice）
$ fam = explode（' - '，$ name）;
$ family = $ fam [0];
$ args = array（
'post_type'=>'post'，
array（
'key'=>'brand '，
'value'=> $ brand，
），
array（
'key'=>'ram'，
'value'=> ; $ ram，
），
数组（
'key'=>'price'，
'value'=> $ price，
），
）;
$ query = new WP_Query（$ args）;
if（$ query-> have_posts（））：
while（$ query-> have_posts（））：$ query-> the_post（）;
echo file_get_contents（locate_template（content.php））;
endwhile;
wp_reset_query（）;
else：
wp_send_json（$ query-> posts）;
endif;
die（）;
}
脚本
jQuery（document）.ready（function（$）{
$（'＃phones-filter .br' ）.click（function（）{
var choices = {}; //声明一个空数组
var choice = $（this）.attr（'name'）;
$（'。contents'）。remove（）;
$（'。filter-output'）。empty（）;
//扫描每个复选框以查看状态数据$ b $（$（this）.prop（'checked'））{
var name（$ {
' = $（this）.attr（'name'），val = $（this）.val（）;
choices [name] = val;
}
}）;
$ .ajax（{
url：ajaxobject.ajaxurl，
type：'POST'，
data：{
'action'：'call_post'，
'选择'：选项，
}，
success：function（result）{
$（choice）.appendTo（'。filter-output'）;
console.log（result）;
console.log（选择）;
}，
错误：function（err）{
console.log（err）;
console.log（选择）;
}
}）;
}）
}）;
Form.php （缩写）
< form id =phones-filter>
< div class =brand>
< li>< input type =checkboxname =brand-1value =Nokiaclass =br>诺基亚< / li>
< li>< input type =checkboxname =brand-2value =LGclass =br> LG< / li>
< li>< input type =checkboxname =brand-3value =Sonyclass =br>索尼< / li>
< li>< input type =checkboxname =brand-4value =Appleclass =br> Apple< / li>
< / div>
< div class =ram>
< li> < input type =checkboxname =ram-1value =1GBclass =br> 1 GB< / li>
< li>< input type =checkboxname =ram-2value =2GBclass =br> 1 GB< / li>
< li>< input type =checkboxname =ram-3value =3GBclass =br> 2 GB< / li>
< li>< input type =checkboxname =ram-3value =4GBclass =br> 4 GB< / li>
< / div>
< div class =price>
< li>< input type =checkboxname =price-1value =$ 100class =br> $ 100< / li>
< li>< input type =checkboxname =price-2value =$ 200class =br> $ 200< / li>
< li>< input type =checkboxname =price-3value =$ 300class =br> $ 300< / li>
< li>< input type =checkboxname =price-4value =$ 500class =br> $ 400< / li>
< / div>
< div class =filter-output>< / div>
< / form>
content.php
< div <？php post_class（'col-lg-2 col-md-2 col-sm-3 col-xs- 6'）; ？> id =post-<？php the_ID（）;？>>
< div class =single-post>
< div class =post-thumb>
< a href =<？php echo esc_url（post_permalink（））;？>>
<？php the_post_thumbnail（'large'，array（
'class'=>'img-responsive'
））; ？>
< / a>
< / div>
< div class =post-info>
< div class =post-title>< li>< a href =<？php echo esc_url（post_permalink（））;？>><？php the_title ）; ？>< / A>< /立GT;< / DIV>
< div class =rs>< p><？php echo get_post_meta（get_the_ID（），'price'，true）; ？><？php _e（''，'mobilewebsite'）; ？>< / P>< / DIV>
< / div>
< / div>
< / div>
<？php $ item_number ++;
if（$ item_number％2 == 0）echo'< div class =clearfix visible-xs-block>< / div>';
if（$ item_number％4 == 0）echo'< div class =clearfix visible-sm-block>< / div>';
if（$ item_number％6 == 0）echo'< div class =clearfix visible -md-block>< / div>';
if（$ item_number％6 == 0）echo'< div class =clearfix visible -md-block>< / div>';
？>
解决方案 使用以下代码尝试
< form id ='test'>
< strong>品牌< / strong>
< div class =brand>
< li>< input type =checkboxname =brandvalue =Nokiaclass =br>诺基亚< / li>
< li>< input type =checkboxname =brandvalue =LGclass =br> LG< / li>
< li>< input type =checkboxname =brandvalue =Sonyclass =br>索尼< / li>
< li>< input type =checkboxname =brandvalue =Appleclass =br> Apple< / li>
< / div>
< strong> Ram< / strong>
< div class =ram>
< li> < input type =checkboxname =ramvalue =1GBclass =br> 1 GB< / li>
< li>< input type =checkboxname =ramvalue =2GBclass =br> 1 GB< / li>
< li>< input type =checkboxname =ramvalue =3GBclass =br> 2 GB< / li>
< li>< input type =checkboxname =ramvalue =4GBclass =br> 4 GB< / li>
< / div>
< strong>价格< / strong>
< div class =price>
< li>< input type =checkboxname =pricevalue =$ 100class =br> $ 100< / li>
< li>< input type =checkboxname =pricevalue =$ 200class =br> $ 200< / li>
< li>< input type =checkboxname =pricevalue =$ 300class =br> $ 300< / li>
< li>< input type =checkboxname =pricevalue =$ 500class =br> $ 400< / li>
< / div>
< / form>
jQuery（document）.ready（function（$）{
$（'＃test .br'）。click（function ）{
//声明一个数组
var choices = {};
$ b $（'。contents'）。remove（）;
$ （'.filter-output'）。empty（）
'（'input [type = checkbox]：checked'）。each（function（）{
if（！choices.hasOwnProperty （this.name））
choices [this.name] = [this.value];
else
choices [this.name] .push（this.value）;
}）;
console.log（选项）;
$ .ajax（{
url：ajaxobject.ajaxurl，
type：'POST' ，
data：{
'action'：'call_post'，// php名称函数
'选项'：选项，
}，
成功：函数[R esult）{
$（'。filter-output'）。append（result）;
//仅用于测试 - 成功（您可以稍后删除它）
//console.log（result）;
//console.log (choices）;
}，
error：function（err）{
//仅用于测试 - 错误（您可以稍后删除它）
console.log（err）;
console.log（选择）;
}
}）;
}）
}）;
add_action（'wp_ajax_call_post'，'call_post'）;
add_action（'wp_ajax_nopriv_call_post'，'call_post'）;
函数call_post（）{
//获取ajax数据：
//每个checked的键值数组（name）/复选框
$ choices = $ _POST ['choices'];
$ meta_query = array（'relation'=&'; OR'）;
foreach（$ options as $ Key => $ Value）{
if（count（$ Value））{
foreach（$ Value as $ Inkey => $ Invalue）{
$ meta_query [] = array（'key'=> $ Key，'value'=> $ Invalue，'compare'=>'='）;
$ b $ args = array（
'post_type'=>'post'，
'meta_query'=> $ meta_query
）;
$ query = new WP_Query（$ args）;
// if（！empty（$ params ['template']））{
//// $ template = $ params ['template'];
if（$ query-> have_posts（））：
while（$ query-> have_posts（））：$ query-> the_post（）;
get_template_part（'content'）;
endwhile;
wp_reset_query（）;
else：
wp_send_json（$ query-> posts）;
endif;
//}
die（）;
}
I am trying to achieve an ajax post filter with a form which use muti-selection checkboxes. I have shortened the form with only 3 groups of 4 checkboxes each (instead of 11 groups).
Here my filter have 3 groups (master keys) which are brand, ram and price, and every group have 4 different key / values (checkboxes). Each checkbox in the group can be checked (multi-selection)
Here is the live link for this project, and if you check with your browser console tools, you will see that the data is correctly sent by jQuery and received by my php function.
This is working:
The HTML file with all the checkboxes is working fine with my ajax jQuery script and it sends correctly an array of key/values to my php function. I have correctly registered my jQuery script and used as well as
The array of data received (for 2 checked checkboxes for example of the same group):
$choices = array( 'brand1' => 'Nokia', 'brand3' => 'Sony' );**`wp_localize_script()`**…
What is not working yet:
- Prepare the data for theWP_query()
- The query herself$argsarray
How to manage call_post() function, after that it get value from JS and disply posts using loop??**
The PHP code in
function.php:
add_action('wp_ajax_call_post', 'call_post');
add_action('wp_ajax_nopriv_call_post', 'call_post');
function call_post(){
$choices = $_POST['choices'];
print_r($_POST['choices']);
foreach($choices as $name => $choice)
$fam = explode('-', $name);
$family = $fam[0];
}
$args = array(
'post_type' => 'post',
array(
'key' => 'brand',
'value' => $brand,
) ,
array(
'key' => 'ram',
'value' => $ram,
) ,
array(
'key' => 'price',
'value' => $price,
) ,
);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo file_get_contents(locate_template("content.php"));
endwhile;
wp_reset_query();
else :
wp_send_json($query->posts);
endif;
die();
}
Script
jQuery(document).ready(function($){
$('#phones-filter .br').click(function(){
var choices = {}; // declaring an empty array
var choice = $(this).attr('name');
$('.contents').remove();
$('.filter-output').empty();
// scanning each checkbox for checked state data
$('div > li > .br').each(function(index, obj) {
if($(this).prop('checked')){
var name = $(this).attr('name'), val = $(this).val();
choices[name] = val;
}
});
$.ajax({
url: ajaxobject.ajaxurl,
type :'POST',
data : {
'action' : 'call_post',
'choices' : choices,
},
success: function (result) {
$(choice).appendTo('.filter-output');
console.log(result);
console.log(choices);
},
error: function(err){
console.log(err);
console.log(choices);
}
});
})
});
Form.php (shortened)
<form id="phones-filter" >
<div class="brand">
<li><input type="checkbox" name="brand-1" value="Nokia" class="br"> NOKIA </li>
<li><input type="checkbox" name="brand-2" value="LG" class="br"> LG </li>
<li><input type="checkbox" name="brand-3" value="Sony" class="br"> Sony </li>
<li><input type="checkbox" name="brand-4" value="Apple" class="br"> Apple </li>
</div>
<div class="ram">
<li> <input type="checkbox" name="ram-1" value="1GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram-2" value="2GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram-3" value="3GB" class="br"> 2 GB </li>
<li><input type="checkbox" name="ram-3" value="4GB" class="br"> 4 GB </li>
</div>
<div class="price">
<li><input type="checkbox" name="price-1" value="$100" class="br"> $100 </li>
<li><input type="checkbox" name="price-2" value="$200" class="br"> $200 </li>
<li><input type="checkbox" name="price-3" value="$300" class="br"> $300 </li>
<li><input type="checkbox" name="price-4" value="$500" class="br"> $400 </li>
</div>
<div class="filter-output"></div>
</form>
content.php
<div <?php post_class( 'col-lg-2 col-md-2 col-sm-3 col-xs-6 ' ); ?> id="post-<?php the_ID(); ?>">
<div class="single-post">
<div class="post-thumb" >
<a href="<?php echo esc_url( post_permalink() ); ?>">
<?php the_post_thumbnail ( 'large', array(
'class' => 'img-responsive'
) ); ?>
</a>
</div>
<div class="post-info">
<div class="post-title"><li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title(); ?></a></li></div>
<div class="rs"><p><?php echo get_post_meta( get_the_ID(), 'price', true ); ?><?php _e( '', 'mobilewebsite' ); ?></p></div>
</div>
</div>
</div>
<?php $item_number++;
if( $item_number % 2 == 0 ) echo '<div class="clearfix visible-xs-block"></div>';
if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-sm-block"></div>';
if( $item_number % 6 == 0 ) echo '<div class="clearfix visible-md-block"></div>';
if( $item_number % 6 == 0 ) echo '<div class="clearfix visible-md-block"></div>';
?>
解决方案
Try with below code
<form id='test' >
<strong>Brand</strong>
<div class="brand">
<li><input type="checkbox" name="brand" value="Nokia" class="br"> NOKIA </li>
<li><input type="checkbox" name="brand" value="LG" class="br"> LG </li>
<li><input type="checkbox" name="brand" value="Sony" class="br"> Sony </li>
<li><input type="checkbox" name="brand" value="Apple" class="br"> Apple </li>
</div>
<strong>Ram</strong>
<div class="ram">
<li> <input type="checkbox" name="ram" value="1GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram" value="2GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram" value="3GB" class="br"> 2 GB </li>
<li><input type="checkbox" name="ram" value="4GB" class="br"> 4 GB </li>
</div>
<strong>Price</strong>
<div class="price">
<li><input type="checkbox" name="price" value="$100" class="br"> $100 </li>
<li><input type="checkbox" name="price" value="$200" class="br"> $200 </li>
<li><input type="checkbox" name="price" value="$300" class="br"> $300 </li>
<li><input type="checkbox" name="price" value="$500" class="br"> $400 </li>
</div>
</form>
jQuery(document).ready(function($){
$('#test .br').click(function(){
// declaring an array
var choices = {};
$('.contents').remove();
$('.filter-output').empty()
$('input[type=checkbox]:checked').each(function() {
if (!choices.hasOwnProperty(this.name))
choices[this.name] = [this.value];
else
choices[this.name].push(this.value);
});
console.log(choices);
$.ajax({
url: ajaxobject.ajaxurl,
type :'POST',
data : {
'action' : 'call_post', // the php name function
'choices' : choices,
},
success: function (result) {
$('.filter-output').append(result);
// just for test - success (you can remove it later)
//console.log(result);
//console.log(choices);
},
error: function(err){
// just for test - error (you can remove it later)
console.log(err);
console.log(choices);
}
});
})
});
add_action('wp_ajax_call_post', 'call_post');
add_action('wp_ajax_nopriv_call_post', 'call_post');
function call_post(){
// Getting the ajax data:
// An array of keys("name")/values of each "checked" checkbox
$choices = $_POST['choices'];
$meta_query = array('relation' => 'OR');
foreach($choices as $Key=>$Value){
if(count($Value)){
foreach ($Value as $Inkey => $Invalue) {
$meta_query[] = array( 'key' => $Key, 'value' => $Invalue, 'compare' => '=' );
}
}
}
$args = array(
'post_type' => 'post',
'meta_query' =>$meta_query
);
$query = new WP_Query($args);
//if( ! empty ($params['template'])) {
////$template = $params['template'];
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
get_template_part('content');
endwhile;
wp_reset_query();
else :
wp_send_json($query->posts);
endif;
//}
die();
}
这篇关于使用多选复选框获取带有Ajax帖子过滤器的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
