Displaying table data in modal with PHP and JavaScript

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();
}

JavaScript
​x
 
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!

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.

Advertisement

Answer