0

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">&times;</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?

7
  • 1
    Where is your JavaScript that populates the modal? Commented Oct 10, 2024 at 19:40
  • it doesn't dynamically call the ID of the row....well, have you written any code which you expect to be doing that job? If you have, you don't seem to have shared it with us here. And if you had an attempt which didn't work, did you try to debug it? Maybe it just needs some tweaks. That would be better than us starting all over again from scratch. See also How to Ask and how to make a minimal reproducible example of your problem. Commented Oct 10, 2024 at 21:11
  • I've cleaned out all the things ive tried. I'm just muddling through trying to make something work. the solutions (and code) i've tried were like this stackoverflow.com/questions/10626885/… but i don't understand the "script" part of the code. Commented Oct 11, 2024 at 8:49
  • @DanLindley Well in the answer at stackoverflow.com/a/25060114/5947043 for example, it simply detects when the modal is being shown, and then takes the ID from a data-id attribute on the specific link which was clicked, so that it populates dynamically based on the clicked link, rather than (as your code is now) hard-coded by PHP when the page was initially loaded. So all you have to do to use that example is amend the PHP code which outputs your modal-opening links so it includes the relevant data attribute in each link that it generates. Commented Oct 11, 2024 at 8:55
  • I'm sorry i don't understand. I've tried to amend code with my own variables but i don't understand whats going on, and find it hard to follow. I didn't realise making a pop-up form would be so difficult. I've used a few examples that have a data- line in the hyperlink and placed my variable inside this but that also doesnt work. The solutions i try either result in php errors or just don't open the modal. In the interst of full disclosure, im not a programmer etc, just a bloke with a website for the voluntary sector Commented Oct 11, 2024 at 9:24

1 Answer 1

1

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">&times;</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/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/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">&times;</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>

Sign up to request clarification or add additional context in comments.

8 Comments

thank you for the example you have provided. I really appreciate your efforts. Similarly to the other solutions i have tried, the modal doesn't load. is there somewhere specific the <script> code needs to go, i have tried it in the main page, and in the modal section.
It doesn't really matter, as long as it gets loaded into the same page where the modal is. By convention people often put them in the <head> area of the page but that's not mandatory. But if it's not doing anything, have you checked for errors? Have a look in your browser's Console (in the Developer Tools) to see if there are any JS errors preventing it from running the necessary code. Obviously make sure you've got jQuery and the right boostrap JS file loaded as well, like in my example.
Worked like a charm thank you - I found a problem in that i had commented out the include for the modal. Works well in another section too where the patient_id is populated by a php variable (individual record view)
No problem, glad you got it figured out
is it possible to add one more item of data? i was toying with putting the name (rather than ID) and wondered if i could add data-name="$name" to the link and then an additional line in your script e.g //get data-id attribute of the clicked element var patientname = $(e.relatedTarget).data("name");
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.