AJAX dropdown submission WordPress
Me again.
I have a dropdown filter on a custom taxonomy archive page. When dropdown selection is submitted, posts are filtered using a pre_get_posts query. This is now working thanks to some help received here.
function sale_selector() {
global $wp_query;
if(isset($_GET['sale_submit'])) {
$dropdown_value = $_GET['section_name'];
}
// Query for current sale name
$sale = $wp_query->get_queried_object();
$sale_id = $sale->term_id;
$acf_lookup = 'sale_'.$sale_id;
$form_destination = get_term_link($sale);
echo '<form id="sale_selector" method="GET" action="' . $form_destination . '">
<select name="section_name">
<option value="">All Lots</option>';
if( have_rows('sections', $acf_lookup ) ){
while( have_rows('sections', $acf_lookup ) ): the_row();
$section_title = get_sub_field('sectionname');
if($section_title == $dropdown_value){
$selected = ' selected';
} else {
$selected = '';
}
echo '<option value="' . $section_title . '" ' . $selected . '>' . $section_title . '</option>';
endwhile;
}
echo '</select>
<input type="submit" name="sale_submit" id="filter_button" value="OK">
</form>';
// pre_get_posts based on the selected value
}
Trouble is, on certain custom post type pages, the site ajax loads this custom taxonomy archive page content within a div further down the page, with pagination etc all set up to ajax between pages.
When I introduce the dropdown into this setup it requires a page refresh on submit.
I'm using the jQuery below to load the archive page into div#sale.
Question - how can i adapt/add to my jQuery below to submit the dropdown selection via ajax and avoid the page refresh, loading the results into the div#sale?
All the content required on the custom taxonomy page is contained within the div#swap.
jQuery('.ajax-link').click(function(){
jQuery('#original, #sale, #further-images, #highlights').hide();
jQuery('.ajax-loader').css("display", "block");
jQuery('#sale').load(jQuery(this).attr("href") + " #swap", function(){
jQuery('#sale').delay(1000).fadeIn(1000);
jQuery('.ajax-loader').delay(1000).hide(0);
});
// Prevent browsers default behavior to follow the link when clicked
return false;
});
Apologies if my jQuery isn't great, I'm learning as I go...
Answers (3)
Reigel Gallarde answers:
If I will code this, I have to check the page...
but I can guess without having to see the page...
change your javascript/jQuery to this...
var current = null;
jQuery('.ajax-link').click(function(){
jQuery('#original, #sale, #further-images, #highlights').hide();
jQuery('.ajax-loader').css("display", "block");
var link = jQuery(this).attr("href"),
param = jQuery('#sale_selector').serialize();
jQuery('#sale').load( link + param + " #swap", function(){
jQuery('#sale').delay(1000).fadeIn(1000);
jQuery('.ajax-loader').delay(1000).hide(0);
});
current = jQuery(this);
// Prevent browsers default behavior to follow the link when clicked
return false;
});
jQuery('body').on('submit', '#sale_selector', function(e){
e.preventDefault();
var $form = jQuery(this);
if (current = null) {
jQuery('#original, #sale, #further-images, #highlights').hide();
jQuery('.ajax-loader').css("display", "block");
link = $form.attr('action');
param = $form.serialize();
jQuery('#sale').load( link + param + " #swap", function(){
jQuery('#sale').delay(1000).fadeIn(1000);
jQuery('.ajax-loader').delay(1000).hide(0);
});
} else {
current.trigger('click');
}
});
theflyingant comments:
Hi, thanks. Unfortunately, this still triggers a page refresh on submit.
Reigel Gallarde comments:
I thought so too... it's hard to guess... there might be JavaScript error... with errors, my given code will not work
Reigel Gallarde comments:
I have updated my code above... please try...
Rempty answers:
Hello theflyingant
The dropdown is loaded inside the #swap?
theflyingant comments:
Hi,
Yes, next to the pagination function.
<div id="swap">
<div class="full-page">
<h2 class="online-h2">Browse Lots
<span>- Select a lot for further details</span>
</h2>
<?php // include a dropdown menu to jump to lots in certain sales
sale_selector(); ?>
<?php include catalogue navigation (template-tags.php)-->
catalogue_nav(); ?>
Rempty comments:
replace your current jquery script
with this
<script>
jQuery(document).ready(function(){
jQuery('.ajax_link').click(function(){
jQuery('#original, #sale, #further-images, #highlights').hide();
jQuery('.ajax-loader').css("display", "block");
jQuery('#sale').load(jQuery(this).attr("href") + " #swap", function(){
jQuery('#sale').delay(1000).fadeIn(1000);
jQuery('.ajax-loader').delay(1000).hide(0);
jQuery("#sale_selector").bind('submit',ajax_form);
});
return false;
});
function ajax_form(event){
jQuery('#original, #sale, #further-images, #highlights').hide();
jQuery('.ajax-loader').css("display", "block");
$link=jQuery(this).attr('action');
$select=jQuery('select',jQuery(this));
$selval=$select.val();
jQuery('#sale').load($link+'?sale_submit=OK§ion_name='+$selval + " #swap", function(){
jQuery('#sale').delay(1000).fadeIn(1000);
jQuery('.ajax-loader').delay(1000).hide(0);
jQuery("#sale_selector").bind('submit',ajax_form);
});
return false;
}
});
</script>