Ask your WordPress questions! Pay money and get answers fast! (more info)

AJAX dropdown submission

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)

2016-02-01

Arnav Joy answers:

Hi ,

Can you show me site/url where this is happening ?

2016-02-01

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...

2016-02-01

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&section_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>