Hi everyone,
I'm an intern and new to dynamic web development. I have a question about handling language detection and updating checkboxes accordingly.
Goal:
I need to determine the current language set on the website. There are PDF files available in different languages, and I want to:
- Display the correct PDFs based on the selected language.
- Ensure that the corresponding checkboxes for the available PDFs are correctly checked.
Question:
What’s the best way to detect the current language and dynamically update the checkboxes to reflect the correct PDFs?
I am using a custom file of Swift_ProductDetailsMediaTable file for this.
This is the current added code to update the checkboxes, hardcoded languages in this script
<script>
document.querySelector('.js-dropdown').addEventListener('mouseenter', function() {
this.querySelector('.dropdown-menu').classList.add('show');
});
document.querySelector('.js-dropdown').addEventListener('mouseleave', function() {
this.querySelector('.dropdown-menu').classList.remove('show');
});
function filterResults(lang) {
var tbody = document.getElementById('download-table').getElementsByTagName('tbody')[0];
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i];
var lang_code = row.classList.item(0);
if (lang == "ALL") {
var checked = document.querySelector(`input[value="ALL"]`).checked;
var checkboxesDiv = document.querySelector('.w-100.p-3');
var checkboxes = checkboxesDiv.querySelectorAll('input[type="checkbox"]');
if (checked) {
tbody.rows[i].classList.remove('hide-row');
checkboxes.forEach(function (checkbox) {
checkbox.checked = true
})
}
else {
tbody.rows[i].classList.add('hide-row');
checkboxes.forEach(function (checkbox) {
checkbox.checked = false
})
}
}
if (lang_code == lang) {
if (lang != "ALL") {
var checked = document.querySelector(`input[value=${lang}]`).checked;
if (checked) {
tbody.rows[i].classList.remove('hide-row');
}
else {
tbody.rows[i].classList.add('hide-row');
}
}
}
}
function updateSelectedLanguages() {
var selectedLanguages = [];
var selectedText = document.querySelector('.js-dropdown-btn');
var checkboxes = document.querySelectorAll('input[name="LanguageId"]:checked');
checkboxes.forEach(function (checkbox) {
if (checkbox.value != "ALL") {
selectedLanguages.push(checkbox.dataset.shortName);
}
});
var selectedLanguagesString = selectedLanguages.join(', ');
if (selectedLanguagesString.length == 0) {
selectedText.innerText = "None";
}
else {
selectedText.innerText = selectedLanguagesString;
}
}
function handleAllCheckboxChange() {
var allCheckbox = document.querySelector('input[name="LanguageId"][value="ALL"]');
var checkboxes = document.querySelectorAll('input[name="LanguageId"]:not([value="ALL"])');
checkboxes.forEach(function (checkbox) {
checkbox.checked = allCheckbox.checked;
});
updateSelectedLanguages();
}
function handleOtherCheckboxChange() {
var allCheckbox = document.querySelector('input[name="LanguageId"][value="ALL"]');
var checkboxes = document.querySelectorAll('input[name="LanguageId"]:not([value="ALL"])');
var allChecked = true;
checkboxes.forEach(function (checkbox) {
if (!checkbox.checked) {
allChecked = false;
}
});
allCheckbox.checked = allChecked;
updateSelectedLanguages();
}
var allCheckbox = document.querySelector('input[name="LanguageId"][value="ALL"]');
allCheckbox.addEventListener('change', function () {
handleAllCheckboxChange();
});
var checkboxes = document.querySelectorAll('input[name="LanguageId"]');
checkboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
if (checkbox.value !== "ALL") {
handleOtherCheckboxChange();
}
updateSelectedLanguages();
});
});
}
document.addEventListener("DOMContentLoaded", function () {
// Map languages
var langCodeMap = {
"English": "LANG1", // English
"Français": "LANG11", // French
"Deutsch": "LANG5", // German
"Nederlands": "LANG4",// Dutch
"Español": "LANG6", // Spanish
"Italiano": "LANG7", // Italian
"Português": "LANG8", // Portuguese
"Polski": "LANG9" // Polish
};
// Get language and change text button
var buttonSpan = document.querySelector("button.btn.nav-link span");
var dropdownbtn = document.querySelector(".js-dropdown-btn");
var lang = langCodeMap[buttonSpan.innerText] || "LANG1"; // Default to "LANG1" (English) if not found
if (dropdownbtn) {
dropdownbtn.innerText = buttonSpan.innerText || "English"; // Default to "English" if no match
}
// uncheck all checkboxes
var checkboxes = document.querySelectorAll('input[name="LanguageId"]:not([value="ALL"])');
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
console.log("Checkbox unchecked: ", checkbox.value);
});
//check the correct checkbox
checkboxes.forEach(function (checkbox) {
if (checkbox.value === lang) {
checkbox.checked = true; // Check the corresponding checkbox
console.log("Checkbox checked: ", checkbox.value);
}
});
//filter correct pdf
filterResults(lang);
});
<script/>
Any guidance or best practices would be greatly appreciated!
Thanks in advance!
