I have a number of filters which update a list of cards on a page.
As the filter options have grown, I have now moved these into a drop down list for better UX. I am now running into an issue where the data (cards) no longer recognises the filters selected, and will not filter as a result. The filter data target remains the same. For example, when selecting "closed" only the data with status-closed should display.
$(document).ready(function() {
// Existing - Display cards based on filter select:
$('.filter-data').on('change', 'input[type=radio]', function() {
var filtername = $(this).attr('name');
var filtervalue = $(this).val();
$('.cards').attr('data-' filtername '-match', filtervalue);
$('.cards').attr('data-visible-count', $('.cards .card:visible').length);
});
// NEW - Change the button text & add active class:
$('.input-select').change(function() {
var dropdown = $(this).closest('.dropdown');
var thislabel = $(this).closest('label');
dropdown.find('label').removeClass('active');
if ($(this).is(':checked')) {
thislabel.addClass('active');
dropdown.find('ins').html(thislabel.text());
}
});
// New - Add tabindex on labels:
$('label.dropdown-item').each(function(index, value) {
$(this).attr('tabindex', 0);
$(this).find('input').attr('tabindex', -1);
});
// New - Add keyboard navigation:
$('label.dropdown-item').keypress(function(e) {
if ((e.keyCode ? e.keyCode : e.which) == 13) {
$(this).trigger('click');
}
});
});
Drop down filter structure:
<div >
<button type="button" data-toggle="dropdown"> <ins>Filter</ins> </button>
<div >
<label for="status_all">
<input type="radio" value="all" name="status" id="status_all">
<div>All</div>
</label>
<label for="open">
<input type="radio" value="open" name="status" id="status_open">
<div>Open</div>
</label>
<label for="closed">
<input type="radio" value="closed" name="status" id="status_closed">
<div>Closed</div>
</label>
</div>
</div>
With a simplified version of the card layout - which I am trying to apply the filters to:
<div data-status="open">
<div >
<div>Testing content</div>
</div>
</div>
<div data-status="closed">
<div >
<div>Testing content</div>
</div>
</div>
With the filter-data class, the use of 'this' in the jQuery being used in the correct context? Or does this now target incorrectly?
CodePudding user response:
If you want to hide/show the cards
replace this:
$('.cards').attr('data-' filtername '-match', filtervalue);
$('.cards').attr('data-visible-count', $('.cards .card:visible').length);
with this:
$('.card-wrapper').hide();
$('.card-wrapper [data-' filtername '="' filtervalue '"]').show();
CodePudding user response:
Resolved my issue. Turns out that I was using jQuery closest(); incorrectly and also with the active class.
Restructured to pick up the correct elements.
Thank you to those who provided assistance with this.
$(document).ready(function() {
//EXISTING:
$('.filters').on('change', 'input[type=radio]', function() {
var filtername = $(this).attr('name');
var filtervalue = $(this).val();
$('.cards').attr('data-' filtername '-match', filtervalue );
$('.cards').attr('data-visible-count', $('.cards .card:visible').length );
});
// NEW - Change the button text & add active class:
$('.input-select').change(function() {
var dropdown = $(this).closest('.dropdown');
var thislabel = $(this).closest('label');
dropdown.find('inst').html(thislabel.text());
console.log(dropdown);
console.log(thislabel);
});
// NEW - Add tabindex on labels:
$('label.dropdown-item').each(function(index, value) {
$(this).attr('tabindex', 0);
$(this).find('input').attr('tabindex', -1);
});
// NEW - Add keyboard navigation:
$('label.dropdown-item').keypress(function(e) {
if ((e.keyCode ? e.keyCode : e.which) == 13) {
$(this).trigger('click');
}
});
});