Change AJAX filter from POST to GET for URL Parameters

I have a well defined AJAX filter, in two parts, one for a load more button, and one for a selection of drop down filters. Both reload a list of properties on the front-end in AJAX, and work together in unison (e.g. If I select Min price, max price and number of beds in dropdowns, the list refreshes, and the load more button works as it should).

However, I want to enhance this, so that it also pushes a parameter into the URL, and get the AJAX to look at that parameter instead. So for example, if I select from the dropdown, min price: 100000, max price 5000000 and beds 3, the AJax runs as normal, but the URL also changes to:

mydomain.com/?min_price=100000&max_price=5000000&beds=3

In turn, this URL could be entered directly, and the filters would be preselected, both in the dropdown, and in the AJAX call.

Here’s my code:

JS:

jQuery(function($){

/*
* Load More
*/
$(‘#prop_loadmore’).click(function(){

$.ajax({
url : prop_loadmore_params.ajaxurl,
data : {
‘action’: ‘loadmorebutton’,
‘query’: prop_loadmore_params.posts, // loop parameters passed by wp_localize_script()
‘page’ : prop_loadmore_params.current_page // Get the current page
},
type : ‘POST’,
beforeSend : function ( xhr ) {
$(‘#prop_loadmore’).text( prop_loadmore_params.max_page );
},
success : function( posts ){
if( posts ) {

$(‘#prop_loadmore’).text( ‘More posts’ );
$(‘#main_posts’).append( posts );
prop_loadmore_params.current_page++; // Increase current page by 1

if ( prop_loadmore_params.current_page == prop_loadmore_params.max_page )
$(‘#prop_loadmore’).hide(); // if last page, hide loadmore

} else {
$(‘#prop_loadmore’).hide(); // if no properties, hide loadmore
}
}
});
return false;
});

/*
* Filter
*/
$(‘#filter’).change(function(){

$.ajax({
url : prop_loadmore_params.ajaxurl,
data : $(‘#filter’).serialize(),
dataType : ‘json’,
type : ‘POST’,
beforeSend : function(xhr){
$(‘#filter’).find(‘button’).text(‘Filtering…’);
},
success : function( data ){

// reset current page to 1 when filters on
prop_loadmore_params.current_page = 1;

prop_loadmore_params.posts = data.posts;

// set max page
prop_loadmore_params.max_page = data.max_page;

$(‘#main_posts’).html(data.content);

// If not enough posts for 2nd page, hide loadmore
if ( data.max_page < 2 ) {
$(‘#prop_loadmore’).hide();
} else {
$(‘#prop_loadmore’).show();
}
}
});

return false;

});

});

Functions.php :

add_action( ‘wp_enqueue_scripts’, ‘properties_script_and_styles’);

function properties_script_and_styles() {
global $wp_query;

wp_register_script( ‘property_scripts’, get_stylesheet_directory_uri() . ‘/assets/js/properties.js’, array(‘jquery’) );

wp_localize_script( ‘property_scripts’, ‘prop_loadmore_params’, array(
‘ajaxurl’ => site_url() . ‘/wp-admin/admin-ajax.php’,
‘posts’ => json_encode( $wp_query->query_vars ),
‘current_page’ => $wp_query->query_vars[‘paged’] ? $wp_query->query_vars[‘paged’] : 1,
‘max_page’ => $wp_query->max_num_pages,
‘price_min’ => $_GET[‘price_min’]
) );

wp_enqueue_script( ‘property_scripts’ );
}

add_action(‘wp_ajax_loadmorebutton’, ‘prop_loadmore_ajax_handler’);
add_action(‘wp_ajax_nopriv_loadmorebutton’, ‘prop_loadmore_ajax_handler’);

function prop_loadmore_ajax_handler(){

$args = json_decode( stripslashes( $_POST[‘query’] ), true );
$args[‘paged’] = $_POST[‘page’] + 1;
if (!is_user_logged_in()) {
$args[‘post_status’] = ‘publish’;
}
else {
$args[‘post_status’] = array(‘publish’, ‘private’);
}
query_posts( $args );

if( have_posts() ) :

while( have_posts() ): the_post();

get_template_part( ‘template-parts/post/content’, get_post_format() );

endwhile;
endif;
die;
}

add_action(‘wp_ajax_prop_filters’, ‘property_filters’);
add_action(‘wp_ajax_nopriv_prop_filters’, ‘property_filters’);

function property_filters(){

$order = explode( ‘-‘, $_POST[‘sort_by_dropdown’] );

$args = array(
‘posts_per_page’ => 9,
‘post_status’ => is_user_logged_in() ? array(‘publish’, ‘private’) : array(‘publish’),
‘paged’ => $_POST[‘page’]
);

//*
// Price Min + Price Max Args
//*

if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] || isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] )
$args[‘meta_query’] = array( ‘relation’=>’AND’ );

// If Both
if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] && isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] ) {
$args[‘meta_query’][] = array(
‘key’ => ‘price’,
‘value’ => array( $_POST[‘price_min’], $_POST[‘price_max’] ),
‘type’ => ‘numeric’,
‘compare’ => ‘between’
);
} else {
// if only min price
if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] )
$args[‘meta_query’][] = array(
‘key’ => ‘price’,
‘value’ => $_POST[‘price_min’],
‘type’ => ‘numeric’,
‘compare’ => ‘>’
);

// if only max price
if( isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] )
$args[‘meta_query’][] = array(
‘key’ => ‘price’,
‘value’ => $_POST[‘price_max’],
‘type’ => ‘numeric’,
‘compare’ => ‘<‘
);
}

//*
// Bedrooms Arg
//*
if( isset( $_POST[‘beds’] ) && $_POST[‘beds’] )
$args[‘meta_query’][] = array(
‘key’ => ‘bedrooms’,
‘value’ => $_POST[‘beds’],
‘type’ => ‘numeric’,
‘compare’ => ‘>=’
);

//*
// Property Type Arg
//*
if( isset( $_POST[‘type’] ) && $_POST[‘type’] )
$args[‘meta_query’][] = array(
‘key’ => ‘property_type’,
‘value’ => $_POST[‘type’],
‘compare’ => ‘IN’
);

query_posts( $args );

global $wp_query;

if( have_posts() ) :

ob_start();

while( have_posts() ): the_post();

get_template_part( ‘template-parts/post/content’, get_post_format() );

endwhile;

$posts_html = ob_get_contents();
ob_end_clean();
else:
$posts_html = ‘<p>Nothing found for your criteria.</p>’;
endif;

echo json_encode( array(
‘posts’ => json_encode( $wp_query->query_vars ),
‘max_page’ => $wp_query->max_num_pages,
‘found_posts’ => $wp_query->found_posts,
‘content’ => $posts_html
) );

die();
}

and the HTML:

<input id=”filter_toggle” type=”checkbox”>

<form action=”<?php echo site_url() ?>/wp-admin/admin-ajax.php” method=”POST” id=”filter”>
<div class=”filters_options”>
<select name=”price_min” class=”min_max_select”>
<option disabled=”disabled” selected=”selected” value=””>Minimum Price</option>
<option value=””>Any Price</option>
<option value=”100000″>$100,000</option>
<option value=”150000″>$150,000</option>
<option value=”200000″>$200,000</option>
<option value=”250000″>$250,000</option>
<option value=”300000″>$300,000</option>
<option value=”400000″>$400,000</option>
<option value=”500000″>$500,000</option>
<option value=”600000″>$600,000</option>
<option value=”700000″>$700,000</option>
<option value=”750000″>$750,000</option>
<option value=”800000″>$800,000</option>
<option value=”900000″>$900,000</option>
<option value=”1000000″>$1,000,000</option>
<option value=”1250000″>$1,250,000</option>
<option value=”1500000″>$1,500,000</option>
<option value=”1750000″>$1,750,000</option>
<option value=”2000000″>$2,000,000</option>
<option value=”2250000″>$2,250,000</option>
<option value=”2500000″>$2,500,000</option>
<option value=”2750000″>$2,750,000</option>
<option value=”3000000″>$3,000,000</option>
<option value=”3500000″>$3,500,000</option>
<option value=”4000000″>$4,000,000</option>
<option value=”4500000″>$4,500,000</option>
<option value=”5000000″>$5,000,000</option>
<option value=”6000000″>$6,000,000</option>
<option value=”7000000″>$7,000,000</option>
<option value=”8000000″>$8,000,000</option>
<option value=”9000000″>$9,000,000</option>
<option value=”10000000″>$10,000,000</option>
<option value=”12000000″>$12,000,000</option>
<option value=”14000000″>$14,000,000</option>
<option value=”16000000″>$16,000,000</option>
<option value=”20000000″>$20,000,000</option>
<option value=”25000000″>$25,000,000</option>
<option value=”30000000″>$30,000,000</option>
</select>

<select name=”price_max” class=”min_max_select”>
<option disabled=”disabled” selected=”selected” value=””>Maximum Price</option>
<option value=””>Any Price</option>
<option value=”100000″>$100,000</option>
<option value=”150000″>$150,000</option>
<option value=”200000″>$200,000</option>
<option value=”250000″>$250,000</option>
<option value=”300000″>$300,000</option>
<option value=”400000″>$400,000</option>
<option value=”500000″>$500,000</option>
<option value=”600000″>$600,000</option>
<option value=”700000″>$700,000</option>
<option value=”750000″>$750,000</option>
<option value=”800000″>$800,000</option>
<option value=”900000″>$900,000</option>
<option value=”1000000″>$1,000,000</option>
<option value=”1250000″>$1,250,000</option>
<option value=”1500000″>$1,500,000</option>
<option value=”1750000″>$1,750,000</option>
<option value=”2000000″>$2,000,000</option>
<option value=”2250000″>$2,250,000</option>
<option value=”2500000″>$2,500,000</option>
<option value=”2750000″>$2,750,000</option>
<option value=”3000000″>$3,000,000</option>
<option value=”3500000″>$3,500,000</option>
<option value=”4000000″>$4,000,000</option>
<option value=”4500000″>$4,500,000</option>
<option value=”5000000″>$5,000,000</option>
<option value=”6000000″>$6,000,000</option>
<option value=”7000000″>$7,000,000</option>
<option value=”8000000″>$8,000,000</option>
<option value=”9000000″>$9,000,000</option>
<option value=”10000000″>$10,000,000</option>
<option value=”12000000″>$12,000,000</option>
<option value=”14000000″>$14,000,000</option>
<option value=”16000000″>$16,000,000</option>
<option value=”20000000″>$20,000,000</option>
<option value=”25000000″>$25,000,000</option>
<option value=”30000000″>$30,000,000</option>
</select>

<select name=”beds” class=”select_beds”>
<option disabled=”disabled” selected=”selected” value=””>Bedrooms</option>
<option value=””>All Beds</option>
<option value=”1″>1+</option>
<option value=”2″>2+</option>
<option value=”3″>3+</option>
<option value=”4″>4+</option>
<option value=”5″>5+</option>
</select>

<select name=”type” class=”sort_by_property_type”>
<option disabled=”disabled” selected=”selected” value=””>Property Type</option>
<option value=””>All Property Types</option>
<!– Dynamically pull in the property types (In case more are added) –>
<?php $field = get_field_object(‘property_type’);
if( $field ) {
foreach( $field[‘choices’] as $value ) {
echo ‘ <option value=”‘ . $value . ‘”>’ . $value . ‘</option>’;
}
}
?>
</select>

<select class=”sort_by_dropdown”>
<option value=”dateposted-desc”>Sort by Newest</option>
<option value=”price-desc”>Sort by Price (High to Low)</option>
<option value=”price-asc”>Sort by Price (Low to High)</option>
<option value=”bedrooms-desc”>Sort by Beds (Most to Least)
</option>
<option value=”bedrooms-asc”>Sort by Beds (Least to Most)</option>
</select>

<input type=”hidden” name=”action” value=”prop_filters” />
</div>
</form>
</div>

<ul id=”main_posts” class=”item-listings”>
<?php
// Build the inital Loop
$args = array(
‘posts_per_page’ => 9,
‘paged’ => $paged
);

query_posts( $args );

if( have_posts() ) :

while( have_posts() ): the_post();

get_template_part( ‘template-parts/post/content’, get_post_format() );

endwhile;
endif;?>
</ul>

<?php echo $wp_query->max_num_pages; ?>
<?php if ( $wp_query->max_num_pages > 1 ) :
echo ‘<div id=”prop_loadmore”>More posts</div>’;
endif;
?>

(Sorry, not sure if there was a better way to display the code?)

Read more here:: Change AJAX filter from POST to GET for URL Parameters

Leave a Reply

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