I’m still somewhat new to PHP and JavaScript. I’m working on a web application that involves me displaying some data in a table using PHP and MySQL.
I would like to be able to click on a row of the table and display a modal that will include additional details about the row I just clicked on. I currently have the modal displaying fine when the row is clicked.
Using JavaScript I can already parse whatever is displayed in the table row to the modal.
My Issue is, there are some details I would NOT like to show on the table row, but would like to display in the modal when the full details are viewed. How can I parse the extra values from PHP to the modal?
EDIT: I’m using the JavaScript DataTables library if that matters.
Code:
PHP:
if ($stmt = $conn->prepare($query)) {
$stmt->bind_param("i", $id);
$stmt->execute();
$stmt->bind_result($issueID, $title, $projectName, $assignedTo, $priority,
$status, $type, $creationDate, $dueDate);
while($stmt->fetch()) {
echo "<tr>";
echo "<td>$title</td>";
echo "<td>$projectName</td>";
echo "<td>$assignedTo</td>";
echo "<td>$priority</td>";
echo "<td>$status</td>";
echo "<td>$type</td>";
echo "<td>$creationDate</td>";
echo "</tr>";
}
$stmt->free_result();
$stmt->close();
}
For example I am retrieving the $dueDate in my SQL query, and I want to display this in the modal but not in a table row.
I can try give more clarification if needed, any help would be greatly appreciated.
Thanks!
Advertisement
Answer
To do this without Ajax, generate the table rows with your data-
attributes, e.g. data-duedate="2020-05-12"
. When the user clicks for more info, the JS that handles that click would detect which row was clicked, retrieve the relevant data-foo
values from that row (see jQuery’s data()
function), populate the modal with those values, and finally show the modal.
The down side is that you’re retrieving a ton of data which will always reside in the table, even if the user never clicks for any details. On the plus side, clicking for details should be relatively fast.