Repeated unique IDs in your code can cause issues with getElementById, as it only selects the first instance found in the document. To handle multiple elements, use classes and utilize querySelectorAll('.classname').
Replace ID attributes with class attributes in your HTML:
<div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">
<button class="trackBtn yardDropBtnCt">Edit Track</button><!--change trackBtn here to class-->
<button class="yardDropBtnCt">Clear Track</button>
<button class="yardDropBtnCt">Link3</button>
<button class="yardDropBtnCt">Link4</button></div>
</div>
Select the nodelist using
document.querySelectorAll(".trackBtn")
:
var btnt = document.querySelectorAll(".trackBtn");
Loop through the nodelist using a forEach loop to find the event handler:
btnt.forEach(btn => {
btn.onclick = function() {
modalt.style.display = "block";
}
})
This will open the modal referenced by the variable modalt. You can set up a dataset attribute to track elements for unique data from PHP.
For example, within the onclick event function:
track = e.target.closest('tr').querySelector('.track');
Set the modal's information using the modal ID and classes from HTML:
For Example on the track:
modalt.querySelector('.pg-Heading').textContent = `Edit ${track.textContent}`;
To display input data in the modal, use .value:
modalt.querySelector('.destination').value = destination.textContent;
.
Ensure proper classes are added to your HTML elements. A static version of your JSFiddle demonstrates handling button clicks and setting unique data within the modal.
Incorporate PHP to dynamically generate tables and modals based on nested arrays. Use JS to populate modal data from table row buttons clicked via e.target. See the provided PHP script below for reference.
Your JavaScript code would look like this:
//MODAL BAN
var modalt = document.getElementById("trackModal");
// Get the button that opens the modal
var btnt = document.querySelectorAll(".trackBtn");
// Get the <span> element that closes the modal
var spantrack = document.getElementsByClassName("close")[0];
let track, destination, length, weight, status, remarks = '';
// When the user clicks on the button, open the modal
btnt.forEach(btn => {
btn.onclick = function(e) {
track = e.target.closest('tr').querySelector('.track');
destination = e.target.closest('tr').querySelector('.destination');
length = e.target.closest('tr').querySelector('.length');
weight = e.target.closest('tr').querySelector('.weight');
status = e.target.closest('tr').querySelector('.status');
remarks = e.target.closest('tr').querySelector('.remarks');
modalt.querySelector('.pg-Heading').textContent = `Edit ${track.textContent}`;
modalt.querySelector('.destination').value = destination.textContent;
modalt.querySelector('.length').value = length.textContent;
modalt.querySelector('.weight').value = weight.textContent;
let statusVal = 2;
if(status.textContent === "Ready"){
statusVal = 1
}else if(status.textContent === "Hump"){
statusVal = 3
}
modalt.querySelector('.status').value = statusVal;
modalt.querySelector('.remarks').value = remarks.textContent;
modalt.style.display = "block";
}
})
// When the user clicks on <span> (x), close the modal
spantrack.onclick = function() {
modalt.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalt) {
modalt.style.display = "none";
}
}