Beiträge mit Ajax-Beitragsfilter mit Kontrollkästchen für Mehrfachauswahl abrufen
Ich versuche zu erreichenan ajax post filter mit einem Formular, das @ verwend muti-selection checkboxes. Ich habe das Formular mit nur 3 Gruppen mit jeweils 4 Kontrollkästchen (anstelle von 11 Gruppen) gekürzt.
Hier habe mein Filter 3 groups (Hauptschlüssel) welche sindbrand
, ram
undprice
und jede Gruppe hat 4 verschiedene Schlüssel / Werte (Ankreuzfelder). Jedes Kontrollkästchen in der Gruppe kann mit @ markiert werde (Mehrfachauswahl)
Hier ist der Live-Link für dieses Projekt. Wenn Sie die Tools Ihrer Browserkonsole überprüfen, werden Sie feststellen, dass die Daten korrekt von jQuery gesendet und von meiner PHP-Funktion empfangen werden.
Das funktioniert:
DasHTML
Datei mit allen Kontrollkästchen funktioniert gut mit meinem Ajax-jQuery-Skript und essendet richtig ein Array von Schlüsseln / Werten für meine PHP-Funktion. Ich habe mein jQuery-Skript korrekt registriert und verwendet sowie
Das Array der empfangenen Daten (für 2 markierte Kontrollkästchen zum Beispiel derselben Gruppe):
$choices = array( 'brand1' => 'Nokia', 'brand3' => 'Sony' );**`wp_localize_script()`**…
Was funktioniert noch nicht:
- Bereiten Sie die Daten für das @ vWP_query()
- Die Abfrage selbst$args
array
Wie verwalte ich die call_post () Funktio
Der PHP-Code infunction.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();
}
Skrip
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(verkürzt
<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>';
?>