Hello. Thank you for contacting the Toolset support.
I need to check what's going wrong with the issue.
Have you added any custom code or any custom filter - if yes, what if you try to disable that for a moment and test - do you see it working as expected?
We were recently provided with some custom JavaScript from a different support agent to get our filter name sorted in alphabetical order. When commenting out that custom code it makes all filtering options disappear like in the second picture I sent in my initial post.
Happy to answer any other questions regarding this issue. Thank you for your help thus far.
Please replace the previously suggested Javascript code to:
document.addEventListener("DOMContentLoaded", function() {
function sortRadioAndDropdown() {
// ********* For the .custom-radio radio buttons *********
var customRadio = document.querySelector('.custom-radio');
if (customRadio) {
// Get all the radio inputs and their associated labels
var radioItems = Array.from(customRadio.querySelectorAll('input[type="radio"]')).map(function(radio) {
var label = customRadio.querySelector('label[for="' + radio.id + '"]');
return {
radio: radio,
label: label
};
});
// Sort the radio buttons alphabetically by their label text content
radioItems.sort(function(a, b) {
var textA = a.label.textContent.toLowerCase();
var textB = b.label.textContent.toLowerCase();
return textA.localeCompare(textB);
});
// Clear the container content
customRadio.innerHTML = '';
// Create a document fragment to re-append sorted elements
var fragment = document.createDocumentFragment();
// Append sorted radios and labels to the fragment
radioItems.forEach(function(item) {
fragment.appendChild(item.radio);
fragment.appendChild(item.label);
});
// Append the fragment back into the container
customRadio.appendChild(fragment);
// Show the element with opacity transition after sorting
setTimeout(function() {
customRadio.style.opacity = 1;
}, 100); // Delay to avoid flickering
}
// ********* For the <select> dropdown *********
var selectDropdown = document.querySelector('select[name="wpv-post-topic"]');
if (selectDropdown) {
// Get all the options except the first one (which is "All")
var options = Array.from(selectDropdown.querySelectorAll('option')).slice(1);
// Sort the options alphabetically by their text content
options.sort(function(a, b) {
var textA = a.textContent.toLowerCase();
var textB = b.textContent.toLowerCase();
return textA.localeCompare(textB);
});
// Clear all the options from the dropdown
selectDropdown.innerHTML = '';
// Re-add the "All" option first
var allOption = document.createElement('option');
allOption.value = "0";
allOption.textContent = "All";
selectDropdown.appendChild(allOption);
// Re-append the sorted options to the dropdown
options.forEach(function(option) {
selectDropdown.appendChild(option);
});
// Show the element with opacity transition after sorting
setTimeout(function() {
selectDropdown.style.opacity = 1;
}, 100); // Delay to avoid flickering
}
}
// Call the function when the DOM is loaded
sortRadioAndDropdown();
// Listen for AJAX completion (using jQuery for example)
jQuery(document).ajaxComplete(function() {
// Re-run the sorting logic after the AJAX request completes
sortRadioAndDropdown();
});
});
The new code also considers the Ajax loading feature that the RESET button has.
