Filtering Custom post types with AJAX

up vote
0
down vote
favorite
I have created a form for a property page which filters the properties. I’ve set it so that every time a value is selected the form is automatically submitted. My only issue is that the page refreshes every time I select a value, so I’d like to use AJAX to stop that. But I don’t know how to use AJAX so I have no idea if my code would still work if I included it, as when doing this with AJAX it might require a totally different syntax, I’m hoping not.

So what I need to know is; 1. Will my code need much altering to work with AJAX? 2. Can you possibly show me how to get AJAX to work with my code? thats if it isn’t too much work. If it is either show me how to get one filter to work and I will figure out the rest. Or point me in the direction of a good tutorial on this.

Thanks

My code;

<div class=”container-fluid” id=”filters_bg”>
<div class=”container”>
<form action=”<?php the_permalink(); ?>” method=”get” id=”filters”>
<input id=”location_search” type=”text” placeholder=”Enter a search location” name=”location”>

<label id=”type_button”>Property Type <span class=”arrow”>▼<span></label>
<div id=”property_types”>
<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Detached” <?php if(in_array(‘Detached’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Detached</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Semi-Detached” <?php if(in_array(‘Semi-Detached’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Semi-Detached</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Terraced” <?php if(in_array(‘Terraced’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Terraced</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”End of Terrace” <?php if(in_array(‘End of Terrace’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>End of Terrace</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Apartment” <?php if(in_array(‘Apartment’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Apartment</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Bungalow” <?php if(in_array(‘Bungalow’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Bungalow</p>
</div>
</div>

<div class=”column”>
<div>
<input type=”checkbox” name=”type[]” value=”Commercial” <?php if(in_array(‘Commercial’, $_GET[‘type’])) { ?>checked<?php }; ?> >
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/house_icon.png” alt=”house type icon”>
<p>Commercial</p>
</div>
</div>

<div id=”search”>
<a href=”javascript:;” onclick=”jQuery(‘#filters’).submit();”>Search</a>
</div>
</div>

<div id=”beds”>
<select name=”min_beds” onchange=”this.form.submit()”>
<option value=”” disabled selected>Min Beds</option>
<option value=”1″ <?php if ($_GET[‘min_beds’] == ‘1’) { ?>selected=”true” <?php }; ?> >1 Bed</option>
<option value=”2″ <?php if ($_GET[‘min_beds’] == ‘2’) { ?>selected=”true” <?php }; ?> >2 Bed</option>
<option value=”3″ <?php if ($_GET[‘min_beds’] == ‘3’) { ?>selected=”true” <?php }; ?> >3 Bed</option>
<option value=”4″ <?php if ($_GET[‘min_beds’] == ‘4’) { ?>selected=”true” <?php }; ?> >4 Bed</option>
<option value=”5″ <?php if ($_GET[‘min_beds’] == ‘5’) { ?>selected=”true” <?php }; ?> >5 Bed</option>
<option value=”6+” <?php if ($_GET[‘min_beds’] == ‘6+’) { ?>selected=”true” <?php }; ?> >6+ Bed</option>
</select>
<p>to</p>
<select name=”max_beds” onchange=”this.form.submit()”>
<option value=”” disabled selected>Max Beds</option>
<option value=”1″ <?php if ($_GET[‘max_beds’] == ‘1’) { ?>selected=”true” <?php }; ?> >1 Bed</option>
<option value=”2″ <?php if ($_GET[‘max_beds’] == ‘2’) { ?>selected=”true” <?php }; ?> >2 Bed</option>
<option value=”3″ <?php if ($_GET[‘max_beds’] == ‘3’) { ?>selected=”true” <?php }; ?> >3 Bed</option>
<option value=”4″ <?php if ($_GET[‘max_beds’] == ‘4’) { ?>selected=”true” <?php }; ?> >4 Bed</option>
<option value=”5″ <?php if ($_GET[‘max_beds’] == ‘5’) { ?>selected=”true” <?php }; ?> >5 Bed</option>
<option value=”6+” <?php if ($_GET[‘max_beds’] == ‘6+’) { ?>selected=”true” <?php }; ?> >6+ Bed</option>
</select>
</div>

<div id=”price”>
<select name=”min_price” onchange=”this.form.submit()”>
<?php for($x = 0; $x <= 2000000; $x += 100000): ?>
<?php if($x == 0): ?>
<option value=”” disabled selected>Min Price</option>
<?php else: ?>
<option value=”<?php echo $x; ?>” <?php if ($_GET[‘min_price’] == $x) { ?>selected=”true” <?php }; ?> ><?php echo $x; ?></option>
<?php endif; ?>
<?php endfor; ?>
</select>
<p>to</p>
<select name=”max_price” onchange=”this.form.submit()”>
<?php for($x = 0; $x <= 2000000; $x += 100000): ?>
<?php if($x == 0): ?>
<option value=”” disabled selected>Max Price</option>
<?php else: ?>
<option value=”<?php echo $x; ?>” <?php if ($_GET[‘max_price’] == $x) { ?>selected=”true” <?php }; ?> ><?php echo $x; ?></option>
<?php endif; ?>
<?php endfor; ?>
</select>
</div>

<label id=”filters_button”>Filters <span class=”arrow”>▼<span></label>

<input type=”submit” style=”display: none;”>
</form>
</div>
</div>

<section id=”properties”>
<div class=”container”>
<div class=”row”>
<div class=”col”>
<div class=”row”>
<?php
if($_GET[‘min_price’] && !empty($_GET[‘min_price’])){
$min_price = $_GET[‘min_price’];
}else{
$min_price = 0;
}

if($_GET[‘max_price’] && !empty($_GET[‘max_price’])){
$max_price = $_GET[‘max_price’];
}else{
$max_price = 10000000;
}

if($_GET[‘min_beds’] && !empty($_GET[‘min_beds’])){
$min_beds = $_GET[‘min_beds’];
}else{
$min_beds = ‘1’;
}

if($_GET[‘max_beds’] && !empty($_GET[‘max_beds’])){
$max_beds = $_GET[‘max_beds’];
}else{
$max_beds = ‘6+’;
}

if($_GET[‘location’] && !empty($_GET[‘location’])){
$location = $_GET[‘location’];
$location_val = stripslashes($location);
}

if($_GET[‘type’] && !empty($_GET[‘type’])){
$type = $_GET[‘type’];
}else{
$type = array(“Detached”, “Semi-Detached”, “Terraced”, “End of Terrace”, “Apartment”, “Bungalow”, “Commercial”);
}

$posts = get_posts(array(
‘posts_per_page’ => -1,
‘post_type’ => ‘property’,
‘orderby’ => ‘date’,
‘meta_query’ => array(
‘relation’ => ‘AND’,
array(
‘key’ => ‘property_status’,
‘value’ => ‘For Sale’
),

array(
‘key’ => ‘property_price’,
‘type’ => ‘NUMERIC’,
‘value’ => array($min_price, $max_price),
‘compare’ => ‘BETWEEN’
),

array(
‘key’ => ‘bedrooms’,
‘value’ => array($min_beds, $max_beds),
‘compare’ => ‘BETWEEN’
),

array(
‘relation’ => ‘OR’,
array(
‘key’ => ‘street’,
‘value’ => $location_val,
‘compare’ => ‘LIKE’
),

array(
‘key’ => ‘town’,
‘value’ => $location_val,
‘compare’ => ‘LIKE’
),

array(
‘key’ => ‘county’,
‘value’ => $location_val,
‘compare’ => ‘LIKE’
),

array(
‘key’ => ‘postcode’,
‘value’ => $location_val,
‘compare’ => ‘LIKE’
)
),

array(
‘key’ => ‘type_of_property’,
‘value’ => $type,
‘compare’ => ‘IN’
),
)
));

if( $posts ): ?>
<?php foreach( $posts as $post ):
setup_postdata( $post );
?>
<div class=”col-sm-6 col-md-4 col-lg-3″>
<div class=”shadowwrapper2″>
<a href=”<?php the_permalink(); ?>”>
<?php
$main_field = get_field(‘images’);
$first_row = $main_field[0];
$img = $first_row[‘image’];
$img_med = $img[‘sizes’][‘medium’];
?>

<div class=”propertywrapper”>
<img class=”img-fluid gal_imgs” src=”<?php echo $img_med ?>” alt=”<?php $img[‘alt’]; ?>”/>

<?php if($secondary_flash == “Ideal First Time Buy”): ?>
<span class=”second_flash”>Ideal First Time Buy</span>
<?php elseif($secondary_flash == “Ideal Investment”): ?>
<span class=”second_flash”>Ideal Investment</span>
<?php elseif($secondary_flash == “Under offer”): ?>
<span class=”second_flash”>Under offer</span>
<?php endif; ?>
</div>

<div class=”cornerflash”>
<img src=”<?php bloginfo(‘template_directory’); ?>/imgs/forsale.svg” alt=”corner flash”>
</div>

<div class=”propertyinfo”>
<div class=”row m-0″>
<div class=”col-6 p-0 mt-2″><?php the_field(‘type_of_property’); ?></div>
<div class=”col-6 p-0 mt-2″><?php the_field(‘bedrooms’); ?> bedrooms</div>
</div>
</div>

<div class=”streetpricewrapper”>
<p class=”streetname”>
<?php the_field(‘street’); ?>, <?php the_field(‘town’); ?>
</p>
<p class=”price”>
&pound;<?php the_field(‘property_price’); ?>
</p>
</div>
</a>
</div>
</div>

<?php endforeach; ?>

<?php wp_reset_postdata(); ?>

<?php endif; ?>
</div>
</div>
</div>
</div>
</section>

Read more here:: Filtering Custom post types with AJAX

Leave a Reply

Your email address will not be published. Required fields are marked *