Я пытаюсь создать фильтр сообщений ajax с формой, в которой используются флажки muti-selection . Я сократил форму только с тремя группами по 4 флажка (вместо 11 групп).
Здесь у моего фильтра есть 3 группы (мастер-ключи), которые являются brand , ram и price , а каждая группа имеет 4 разных ключа / значения (флажки) . Каждый флажок в группе можно проверить (многоэкранный)
Вот живая ссылка для этого проекта, и если вы проверите с помощью инструментов консоли браузера, вы увидите, что данные правильно отправлены jQuery и получены моей php-функцией.
Это работает:
HTML файл со всеми флажками отлично работает с моим сценарием ajax jQuery и правильно отправляет массив ключей / значений моей php-функции. Я правильно зарегистрировал сценарий jQuery и использовал его так же, как и
Массив полученных данных (для двух отмеченных флажков, например, одной группы) :
$choices = array( 'brand1' => 'Nokia', 'brand3' => 'Sony' );**`wp_localize_script()`**…
Что еще не работает:
– Подготовьте данные дляWP_query()
– сам запрос$argsarray
Как управлять функцией call_post (), после чего она получает значение от JS и отключает записи, используя цикл **
PHP-код в
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(); }
скрипт
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); } }); }) });по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 (укороченный)
<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>'; ?>
Попробуйте использовать код ниже
<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(); }