I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard coded, but since the content on my page is generated dynamically, I am struggling to figure out how to pass the data to the modal.
So far, I have attempted to use .addAttribute and .appendChild to pass information to a single modal, but it seems like the modal remains blank. I suspect this is because the modal loads at the same time as the page and doesn't get populated even when the button is clicked.
Here is my modal structure:
<div id="modalDisplay" class="modal">
<div id="modalDisplayContent" class="modal-content">
<span class="close" onclick="onClickGetSpan()">×</span>
<div id="formDisplayContent" class="modalContent">
</div>
</div>
</div>
Below is the function that is triggered when a table row is clicked:
function getSingleTask(id){
var taskName = "";
var taskDescription = "";
$.ajax(
{
url: "http://localhost:8080/tasks/" + id,
type: "GET",
dataType: "JSON",
success: function(){
taskName = data.name;
taskDescription = data.description;
var nameTitle = document.createElement("H2");
nameTitle.setAttribute("value", name);
var description = document.createElement("P");
description.setAttribute("value", taskDescription);
document.getElementById("formDisplayContent").appendChild(nameTitle);
document.getElementById("formDisplayContent").appendChild(description);
},
error: function () {
var noNameTitle = document.createElement("H2");
noNameTitle.setAttribute("value", "Error finding task! Try again!");
document.getElementById("formDisplayContent").appendChild(noNameTitle);
}
}
)
var modal = document.getElementById("modalDisplay");
modal.style.display = "block";
}
One possible solution I am considering is to create modals for each table row, sort them by IDs, and then open the corresponding modal when a table row is clicked. However, before I explore that option, I would appreciate any suggestions or improvements on my current approach. Thank you in advance.