Multiple Filter Functionality jQuery
if ($('.project-taxonomy-filter').length > 0) {
$('.project-taxonomy-filter').on('change', function () {
let filters = {};
// Loop through all dropdowns to collect data
$('.project-taxonomy-filter').each(function () {
const taxonomy = $(this).data('taxonomy');
const slug = $(this).val();
if (slug) {
filters[taxonomy] = slug;
}
});
$.ajax({
url: solaron_ajax.ajax_url,
type: 'POST',
data: {
action: 'filter_project_posts',
filters: filters,
project_orderby:$("#project_orderby").val(),
project_order:$("#project_order").val(),
project_number_ofposts:$("#project_number_ofposts").val(),
},
beforeSend: function () {
$('#ajax-project-content').html('Loading…');
},
success: function (response) {
$('#ajax-project-content').html(response);
},
});
});
}
});
make above work if there is multiple element placed on same page
jQuery(document).ready(function ($) {
// Loop through each container with the filter functionality
$('.filter-container').each(function () {
const $container = $(this);
if ($container.find('.project-taxonomy-filter').length > 0) {
$container.find('.project-taxonomy-filter').on('change', function () {
let filters = {};
// Collect data from dropdowns within the current container
$container.find('.project-taxonomy-filter').each(function () {
const taxonomy = $(this).data('taxonomy');
const slug = $(this).val();
if (slug) {
filters[taxonomy] = slug;
}
});
// Perform AJAX request scoped to the current container
$.ajax({
url: solaron_ajax.ajax_url,
type: 'POST',
data: {
action: 'filter_project_posts',
filters: filters,
project_orderby: $container.find("#project_orderby").val(),
project_order: $container.find("#project_order").val(),
project_number_ofposts: $container.find("#project_number_ofposts").val(),
},
beforeSend: function () {
$container.find('#ajax-project-content').html('<p>Loading...</p>');
},
success: function (response) {
$container.find('#ajax-project-content').html(response);
},
});
});
}
});
});### Explanation:
1. **Scoped Containers**:
– Each set of filters is wrapped in a parent container with the class `.filter-container`.
– The code loops through all `.filter-container` instances, ensuring each is processed independently.
2. **Scoped Selectors**:
– Inside each container, the selectors like `.project-taxonomy-filter`, `#project_orderby`, etc., are scoped using `$container.find()`.
3. **Multiple Instances**:
– Since each `.filter-container` is handled independently, multiple instances on the same page won't interfere with each other.
### HTML Structure:
Ensure each filter set is wrapped in a container with a unique `.filter-container`:
<div class="filter-container">
<select class="project-taxonomy-filter" data-taxonomy="category">
<option value="">Select Category</option>
<option value="cat1">Category 1</option>
<option value="cat2">Category 2</option>
</select>
<select id="project_orderby">
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select id="project_order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<input type="hidden" id="project_number_ofposts" value="10">
<div id="ajax-project-content"></div>
</div>
<div class="filter-container">
<!-- Another set of filters and content -->
</div>This ensures that each filter works independently within its own context.