I have a main table page that loads the results of a query with a menu at the side (or rather a collection of buttons). My problem is that when I load a modal from the table I only see the "id" from one of the records and it doesn't dynamically call the ID of the row.
Table:
Patient_ID | Patient | Presenting complaint
-------------------------------------------
23 | Dave | Injured wing
231 | Steve | Broken Leg
This table populates on the admissions.php page and the row of buttons is within a cell in each row. What i want to be able to do, is load a modal with the admission_patient_id so that i can use it in a form. the form is in the add_carenote.php which is contained within a modal
Admissions.php
//Loop from admissions table
$stmt = $conn->prepare("SELECT *FROM rescue_admissions
INNER JOIN rescue_patientsON rescue_admissions.patient_id = rescue_patients.patient_id
WHERE rescue_patients.centre_id = :centre_id AND rescue_admissions.disposition =
'Held in captivity'
ORDER by 'admission_location' ASC");
$stmt->bindParam(':centre_id', $centre_id, PDO::PARAM_INT);
// initialise an array for the results
$applicants = array();
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$admission_id = $row["admission_id"];
$admission_patient_id = $row["patient_id"];
$admission_date = $row["admission_date"];
$admission_name = $row["name"];
$admission_presenting_complaint = $row["presenting_complaint"];
$admission_date = $row["admission_date"];
$adm_format_date = new DateTime($admission_date);
$adm_format_date = $adm_format_date->format('d-m-Y <\b\r> H:i');
print
'<tr>
<td>' . $adm_format_date . '</td>
<td class="align-middle"><b>' . $admission_name . ' <BR></td>
<td class="align-middle">' . $admission_presenting_complaint . '</td>
<td class="align-middle">
<!-- icon button group -->
<div class="btn-group" >
<a href="https://rescuecentre.org.uk/view-patient/?patient_id=' . $admission_patient_id . '"
type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top"
title="Manage Patient Record"><i class="fas fa-file" ></i></a>
<button type="button" class="btn btn-primary" data-toggle="modal" data
target="#carenotesModal"></button>
<button type="button" class="btn btn-info" data-toggle="modal" data-placement="top"
title="Medication Given"><i class="fas fa-syringe" ></i></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#carenotesModal-'. $admission_patient_id .'"> Add Note </button>
</td>';?>
This is the modal text in add_carenote.php
<div class="modal fade" id="carenotesModal" tabindex="-1" role="dialog"
aria-labelledby="carenotesModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="font-weight-bold text-primary">Add a care note</h4>
- <?php echo $admission_patient_id ?>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<form action="" method="post">
<p><label for="new_note">Enter your note below:</label></p>
<textarea id="new_note" name="new_note" rows="4" cols="50"></textarea>
<p><BR> Make this note public? <select id="public" name="public">
<option selected="selected">No</option>
<option>Yes</option>
</select></td>
<input type="submit" id="submit" name="form1" value="Add Care Note" class="form_submit">
<input type="hidden" name="patient_id" value= "/// HERE is where ill need the variable ">
</form>
</div>
I have seen a number of posts on here trying to achieve the same end result in passing the variable across. Ideally i want the "patient_id" from the row to populate the modal so that I can ensure the form goes to the correct patient record. I would like it as a popup so the user does not have to leave the admissions page.
Some of the solutions i have read either completely bricked my pages so the page didn't work or the modal didn't load at all. Some solutions used (i think ajax/jquery - scripts) but i wonder if a form/POST might be better?
Currently your ID is pre-loaded into the modal by PHP when the page is initially rendered, and stays fixed. This doesn't allow you to dynamically set the ID when you open the modal for a particular record.
Instead you can set a data-attribute on the button which opens the modal containing the ID, in order to have the ID of each record pre-prepared in the page - and then you can use JavaScript to detect when the modal is being shown, and use that to take the ID from the link/button which triggered the modal, and put it into the hidden field within the modal. That way the relevant ID will be selected and re-written every time the modal is loaded.
The PHP code of your while loop in Admissions.php should probably look like the example I've made below.
Firstly, rather than a gigantic print statement, for outputting a large chunk of HTML it's usually more readable to break out of PHP, and then just inject PHP variables with short PHP blocks within it.
Secondly you'll see I've set the admission ID as being injected into a data-id attribute in the HTML of the "Add notes" button which triggers the modal.
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$admission_id = $row["admission_id"];
$admission_patient_id = $row["patient_id"];
$admission_date = $row["admission_date"];
$admission_name = $row["name"];
$admission_presenting_complaint = $row["presenting_complaint"];
$admission_date = $row["admission_date"];
$adm_format_date = new DateTime($admission_date);
$adm_format_date = $adm_format_date->format('d-m-Y <\b\r> H:i');
?>
<tr>
<td><?php echo $adm_format_date; ?></td>
<td class="align-middle"><b><?php echo $admission_name; ?></b><BR></td>
<td class="align-middle"><?php echo $admission_presenting_complaint; ?></td>
<td class="align-middle">
<!-- icon button group -->
<div class="btn-group" >
<a href="https://rescuecentre.org.uk/view-patient/?patient_id=<?php echo $admission_patient_id; ?>"
type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top"
title="Manage Patient Record"><i class="fas fa-file" ></i></a>
<button type="button" class="btn btn-info" data-toggle="modal" data-placement="top"
title="Medication Given"><i class="fas fa-syringe" ></i></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#carenotesModal" data-id="<?php echo $admission_patient_id; ?>"> Add Note </button>
</div>
</td>
<?php
And then the HTML form code just needs tweaking:
<div class="modal fade" id="carenotesModal" tabindex="-1" role="dialog" aria-labelledby="carenotesModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="font-weight-bold text-primary">Add a care note</h4>
- <span class="admissionIDDisplay"></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<p><label for="new_note">Enter your note below:</label></p>
<textarea id="new_note" name="new_note" rows="4" cols="50"></textarea>
<p>
<br />
Make this note public?
<select id="public" name="public">
<option selected="selected">No</option>
<option>Yes</option>
</select>
<input type="submit" id="submit" name="form1" value="Add Care Note" class="form_submit" />
<input type="hidden" name="patient_id" />
</p>
</form>
</div>
</div>
</div>
</div>
And lastly this JS/jQuery code will handle the "shown" event of the modal which runs whenever the modal is opened (as per the boostrap documentation). It then gets the context of the button which triggered the modal being shown, and can get the ID from the button's data-id attribute, and use that to populate the display and the hidden field within the modal.
<script>
$(function () {
//triggered when modal is about to be shown
$("#carenotesModal").on("show.bs.modal", function (e) {
//get data-id attribute of the clicked element
var admissionPatientId = $(e.relatedTarget).data("id");
//populate the form
$(e.currentTarget).find(".admissionIDDisplay").text(admissionPatientId);
$(e.currentTarget).find('input[name="patient_id"]').val(admissionPatientId);
});
});
</script>
Here's a working example (using a static HTML table of course because PHP doesn't run in a Stackoverflow code snippet - but it's based on what your PHP would output if there were two rows returned from the SQL query):
$(function () {
//triggered when modal is about to be shown
$("#carenotesModal").on("show.bs.modal", function (e) {
//get data-id attribute of the clicked element
var admissionPatientId = $(e.relatedTarget).data("id");
//populate the form
$(e.currentTarget).find(".admissionIDDisplay").text(admissionPatientId);
$(e.currentTarget).find('input[name="patient_id"]').val(admissionPatientId);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr>
<td>22/09/2024 09:00</td>
<td class="align-middle">
<b>Patient A</b><br />
</td>
<td class="align-middle">Broken arm</td>
<td class="align-middle">
<!-- icon button group -->
<div class="btn-group">
<a href="https://rescuecentre.org.uk/view-patient/?patient_id=123" type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Manage Patient Record"><i class="fas fa-file"></i></a>
<button type="button" class="btn btn-info" data-toggle="modal" data-placement="top" title="Medication Given"><i class="fas fa-syringe"></i></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carenotesModal" data-id="123">Add Note</button>
</div>
</td>
</tr>
<tr>
<td>13/10/2024 15:05</td>
<td class="align-middle">
<b>Patient B</b><br />
</td>
<td class="align-middle">Chest pains</td>
<td class="align-middle">
<!-- icon button group -->
<div class="btn-group">
<a href="https://rescuecentre.org.uk/view-patient/?patient_id=456" type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Manage Patient Record"><i class="fas fa-file"></i></a>
<button type="button" class="btn btn-info" data-toggle="modal" data-placement="top" title="Medication Given"><i class="fas fa-syringe"></i></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carenotesModal" data-id="456">Add Note</button>
</div>
</td>
</tr>
</table>
<div class="modal fade" id="carenotesModal" tabindex="-1" role="dialog" aria-labelledby="carenotesModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="font-weight-bold text-primary">Add a care note</h4>
- <span class="admissionIDDisplay"></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<p><label for="new_note">Enter your note below:</label></p>
<textarea id="new_note" name="new_note" rows="4" cols="50"></textarea>
<p>
<br />
Make this note public?
<select id="public" name="public">
<option selected="selected">No</option>
<option>Yes</option>
</select>
<input type="submit" id="submit" name="form1" value="Add Care Note" class="form_submit" />
<input type="hidden" name="patient_id" />
</p>
</form>
</div>
</div>
</div>
</div>