add_action( 'wp_ajax_nopriv_filter', 'team_filter_ajax' );
add_action( 'wp_ajax_filter', 'team_filter_ajax' );
function team_filter_ajax() {
$category = isset( $_POST['category'] ) ? sanitize_text_field( $_POST['category'] ) : 'all';
$search_term = sanitize_text_field( $_POST['search_term'] );
print_r($category);
$args = array(
'post_type' => 'member',
'posts_per_page' => -1,
'post_status' => 'publish',
'orderby' => 'menu_order',
);
// Create an empty tax_query array
$tax_query = array(
'relation' => 'AND',
);
if ( $category !== 'all' ) {
$tax_query[] = array(
'taxonomy' => 'members_category',
'field' => 'slug',
'terms' => $category,
);
}
if ( $search_term ) {
$args = array(
'post_type' => 'member', // Adjust this to your post type
'posts_per_page' => -1,
's' => $search_term,
);
}
// Add the tax_query to the main $args
if ( ! empty( $tax_query ) ) {
$args['tax_query'] = $tax_query;
}
$query = new WP_Query( $args );
$response = '';
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$response .= render_template( 'template-parts/parts/member-item.php' );
}
} else {
// No members found
$response = 'No members found.';
}
wp_reset_postdata();
echo $response;
die();
}
我需要根据url中发送的参数使这个过滤器工作,例如:mydomain/pageline/?cat=category-name,但是category总是“all”,这意味着$_POST['category']
在我的第一个页面加载时是空的。在我从参数中选择后,这个变量$category
将根据参数的名称而改变。因此,过滤器总是在第一页加载时显示所有团队成员。除此之外,一切正常,文件管理器按预期工作:
下面是我的jquery代码
var $ = require('jquery');
require('webpack-jquery-ui/selectmenu');
$(function() {
initAjaxParameters();
initCategorySelect();
filterTeam();
ajaxFilter();
});
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null){
return null;
}
else {
return decodeURI(results[1]) || 0;
}
};
let parameters = {};
let postsXhr = null;
function filterTeam() {
// Initialize the selectmenu widget
$('#category').selectmenu({
change: function (event, ui) {
var category = ui.item.element.data('category'); // Get the data-category attribute
var searchTerm = $('#search-member').val(); // Get the search term
let url = '';
if (category) {
url = url + '?cat=' + category;
}
ajaxFilter(category, searchTerm);
window.history.pushState('next', document.title, url);
}
});
// Add an event listener for the search input field
$('#search-member').on('input', function () {
var searchTerm = $(this).val();
var category = $('.filter-wrap > select').find('option:selected').attr('data-category');
ajaxFilter(category, searchTerm);
});
}
function initAjaxParameters() {
parameters.action = 'team_filter_ajax';
parameters.category = $.urlParam('cat'); // Set the initial category from URL
// Set the selected option in the select menu
$('#category').val(parameters.category);
if (parameters.category) {
$('#category .ui-menu-item').filter(function () {
console.log('here');
return $(this).data("category") == parameters.category;
}).click(); // Use .click() to trigger the click event
}
}
function initCategorySelect() {
$('#category').selectmenu({
change : function(){
parameters.category = $(this).val();
ajaxFilter();
}
});
}
function pushHistory() {
let url = window.location.href.split('?')[0];
if(parameters.category){
url = url + '?cat=' + parameters.category;
}
window.history.pushState('next', document.title, url);
}
function ajaxFilter(category, searchTerm) {
pushHistory();
$('.ajax-loader').removeClass('opacity-0');
if(postsXhr){
postsXhr.abort();
}
$.ajax({
url: ajax_params.ajaxurl,
data: { action: 'filter', category: category, search_term: searchTerm },
type: 'post',
success: function (result) {
$('.team-section__wrap .inner').html(result);
$('.ajax-loader').addClass('opacity-0');
},
error : function(){
console.log('Something went wrong!');
}
});
}
1条答案
按热度按时间w8rqjzmb1#
在team_filter_aesthetic函数中有一个问题,你需要修改你的team_filter_aesthetic过滤器来检查GET参数。这样
你需要稍微修改一下你的js代码来实现服务器端的响应: