tptxdev
New Coder
The lightbox on the Get More Information button at tpcarlist.com comes up when you click on it but we are unable to get the select box choice produced by this custom code to show it.
HTML:
<script>
var rowsApplied = -1;
var applyingRows = false;
var tryAgain = true;
var previusSelectColumns = 0;
function executeScriptElements(containerElement) {
const scriptElements = containerElement.querySelectorAll("script");
Array.from(scriptElements).forEach((scriptElement) => {
const clonedElement = document.createElement("script");
Array.from(scriptElement.attributes).forEach((attribute) => {
clonedElement.setAttribute(attribute.name, attribute.value);
});
clonedElement.text = scriptElement.text;
scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
});
}
function updateStarsOnclick() {
let stars = document.getElementsByName('star');
for (i = 0; i < stars.length; i++) {
executeScriptElements(stars[i]);
}
}
// Code for Select Column to change the 'Yes' and 'No' content to checked and unchecked checkboxes respectively
function updateSelect() {
updateStarsOnclick();
//use javascript dom to get the cells on the first colomn of the table
let selectColumns = document.querySelectorAll("tbody td:nth-child(1)");
if (selectColumns.length) {
// console.log("-------------");
// console.log(selectColumns[selectColumns.length - 1]);
let ele = selectColumns[selectColumns.length - 1].getElementsByTagName('div');
// console.log("-------------")
// console.log(ele);
// console.log(ele[0]);
// console.log(ele[0].innerText);
// console.log(ele[0].innerHTML);
if (ele[0].innerText == "Yes") {
// console.log("Es YES");
rowsApplied = -1;
}
}
if (selectColumns.length <= rowsApplied ) {
// console.log("No actualiza checkbox. Hay: " + selectColumns.length + " . App: " + rowsApplied + ". Prv: " + previusSelectColumns);
if (!selectColumns.length || previusSelectColumns < selectColumns.length) {
tryAgain = true;
rowsApplied = -1;
}
previusSelectColumns = selectColumns.length;
if (tryAgain) {
setTimeout(updateSelect, 3500);
tryAgain = false;
}
return;
}
if (applyingRows) return;
applyingRows = true;
// console.log("updating selects. " + selectColumns.length + " . App: " + rowsApplied);
// iterate on each of them
Array.from(selectColumns).forEach(function (selectColumn) {
let value = selectColumn.innerText;
if (selectColumn.innerHTML.includes("<style")) {
//if it is already changed to a checkbox, do nothing
} else {
if (value == "Yes") {
// Change 'Yes' to checked checkbox
selectColumn.innerHTML = `
<style>
.custom-checkbox {
display: inline-block;
}
.custom-checkbox input {
display: none;
}
.checkmark {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid black;
background-color: white;
}
.custom-checkbox input:checked + .checkmark:after {
content: "✔️";
font-size: 16px;
font-weight: bolder;
color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Style for the dropdown container */
.dropdown {
position: relative;
display: inline-block;
}
/* Style for the dropdown button */
.dropbtn {
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Style for the dropdown content */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style for the dropdown items */
.dropdown-content a {
padding: 12px 16px;
display: block;
text-decoration: none;
color: #333;
}
/* Change color on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
</style>
<div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0; margin: auto; padding-top: 30px">
<div style:"display: block; margin:auto; padding: 28px">
<label class="custom-checkbox">
<input type="checkbox" checked /> <!-- Set 'checked' attribute -->
<span class="checkmark"></span>
</label>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropdown()">▼</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">feature in progress..</a>
</div>
</div>
</div>
</div>
`;
} else {
//Change 'No' to unchecked checkbox
selectColumn.innerHTML = `
<style>
.custom-checkbox {
display: inline-block;
}
.custom-checkbox input {
display: none;
}
.checkmark {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid black;
background-color: white;
}
.custom-checkbox input:checked + .checkmark:after {
content: "✔️";
font-size: 16px;
font-weight: bolder;
color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Style for the dropdown container */
.dropdown {
position: relative;
display: inline-block;
}
/* Style for the dropdown button */
.dropbtn {
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Style for the dropdown content */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style for the dropdown items */
.dropdown-content a {
padding: 12px 16px;
display: block;
text-decoration: none;
color: #333;
}
/* Change color on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
</style>
<div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0; margin: auto; padding-top: 30px">
<div style:"display: block; margin:auto; padding: 28px">
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
</label>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropdown()">▼</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">feature in progress..</a>
</div>
</div>
</div>
</div>
`;
}
}
});
rowsApplied = selectColumns.length;
previusSelectColumns = selectColumns.length;
applyingRows = false;
setTimeout(addCustomListeners, 500);
}
function addCustomListeners() {
checkDiv = document.getElementById("checkDiv");
if (!checkDiv) return;
checkDiv.addEventListener("click", function () {
checkbox.checked = !checkbox.checked;
});
// Prevent checkbox click event from propagating to the document click event
customCheckbox = document.querySelector(".custom-checkbox");
if (!customCheckbox) return;
customCheckbox.addEventListener("click", function (event) {
event.stopPropagation();
});
paginationButtons = document.querySelectorAll("button.zqtXId");
for (i = 0; i < paginationButtons.length; i++) {
el = paginationButtons[i];
el.onclick = function() {
setTimeout(updateStarsOnclick, 100);
}
}
}
function addSelectListener() {
let selectors = document.getElementsByTagName('select');
// console.log(selectors);
selectors[0].onchange = function() {
tryAgain = true;
setTimeout(updateSelect, 1500);
}
let inputs = document.getElementsByName('search-by keyword');
inputs[0].oninput = function() {
tryAgain = true;
setTimeout(updateSelect, 100);
}
}
// JavaScript function to toggle the visibility of the dropdown content
function toggleDropdown() {
var checkbox = document.querySelector(".custom-checkbox input");
checkbox.checked = !checkbox.checked;
var dropdownContent = document.getElementById("myDropdown");
dropdownContent.style.display =
dropdownContent.style.display === "block" ? "none" : "block";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style.display === "block") {
openDropdown.style.display = "none";
}
}
}
};
//handle checkbox
document.addEventListener("DOMContentLoaded", function () {
setTimeout(updateSelect, 1500);
setTimeout(updateSelect, 2500);
setTimeout(updateSelect, 8500);
setTimeout(addSelectListener, 1500);
});
</script>
