php – Search Ajax Call – Use Form Data in Response
Question
I have an AJAX call and I am worried that I am not using the serialized form data in the response properly so I get the value from ajax filter inputs (i.e.https://prnt.sc/gxrJE9_GocOl) but I am doing it wrong, right?
The original instructions to add ajax filters are here –
https://rudrastyh.com/wordpress/ajax-post-filters.html
My code below:
jQuery(function($){
//ajax call
jQuery('#filter').submit(function(e) {
e.preventDefault();
var filter = jQuery('#filter');
jQuery.ajax({
url: filter.attr('action'),
data: filter.serialize(), // form data
cache: false,
type: filter.attr('method'),
beforeSend: function(xhr) {
filter.find('.btn-filter').text('Filtering...');
console.log(filter.serialize());
},
success: function(data) {
filter.find('.btn-filter').text('Apply filter');
var iso = $scroll_container.data('isotope');
var search_total = jQuery('#search-total');
//remove initial results infinite scroll and isotope for ajax call
if (iso) {
$scroll_container.infiniteScroll('destroy');
$scroll_container.isotope('destroy');
$scroll_container.remove(); //completely remove initial results
search_total.empty();
}
//if ajax infinite scroll and isotope exist already remove so reset
//var inf_ajax = $ajax_container.data('infiniteScroll');
var iso_ajax = $ajax_container.data('isotope');
if (iso_ajax) {
$ajax_container.infiniteScroll('destroy');
$ajax_container.isotope('destroy');
$ajax_container.empty();
search_total.empty();
}
//create "new" isotope instance
$ajax_container.isotope({
layoutMode: 'fitRows',
itemSelector: '.scroll-post'
}); //isotope
var $data = $(data);
$ajax_container.append($data);
$ajax_container.isotope('insert', $data);
var isoajax = $ajax_container.data('isotope');
//for search as a input
var s_term = jQuery("input[type="hidden"][name="s"]").val();
//for category as a radio
var s_cat_term = jQuery("input[type="radio"][name="categoryfilter"]:checked").attr("id");
//var s_cat_term = s_cat_text.replace(/[()\\\/]/g, '').replace(/\s+/g, '-').toLowerCase();
//for orderby as select dropdown
//var s_orderby_text = jQuery("select[name="orderby"]:selected").text();
var s_orderby = jQuery("select[name="orderby"]").val();
if(s_orderby == undefined) {
var s_orderby = 'date';
}
//for order select dropdown and post type as input
var s_order = jQuery("input[type="radio"][name="order"]:checked").val();
if(s_order == undefined) {
var s_orderby = 'desc';
}
var s_post_type = jQuery("input[type="hidden"][name="post_type"]").val();
//replace search total with ajax search results total
var ajax_search_total = jQuery('#ajax-search-total').html();
if(ajax_search_total) {
search_total.append(ajax_search_total);
}
if(ajax_search_total > 9) {
if (s_post_type == 'font') {
var inf_path="/fonts/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
} else if (s_post_type == "photo') {
var inf_path="/photos/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
} else if (s_post_type == "video') {
var inf_path="/videos/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
} else if (s_post_type == "snipp') {
var inf_path="/snippets/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
} else if (s_post_type == "post') {
var inf_path="/blog/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
} else {
var inf_path = "/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
}
console.log(inf_path);
//create "new" infinite scroll instance
$ajax_container.infiniteScroll({
path: inf_path,
append: ".scroll-post',
button: '.btn-scroll',
outlayer: isoajax,
loadOnScroll: false,
//scrollThreshold: 300,
checkLastPage: true,
history: false, //disrupts ajax call category options so set false
status: '.page-load-status',
//hideNav: '.pagination',
debug: true
}); //infinitescroll
jQuery('.btn-scroll').on('click', function() {
$ajax_container.on('load.infiniteScroll', function(event) {
$ajax_container.isotope('layout');
jQuery('.page-load-status').detach().appendTo(jQuery('#ajax_container'));
}); //on load function
}); // on click function
} //ajax search total greater than 9
//reset ajax filter fields breaks pagination
//filter[0].reset();
} // success
}); //ajax call
}); //submit function
});
//Bind click event listener to the submit button
jQuery(document).on('click', 'button[type="submit"]', function() {
jQuery(this).parents('form').submit();
});
0
10 months
2022-08-13T15:39:14-05:00
2022-08-13T15:39:14-05:00 0 Answers
0 views
0
Leave an answer