Show data based on modal click - php

Question

I made a while loop for the data to be displayed in a table format, I prepared <a> when clicked it opens a modal.
I want to have each modal have more info on that specific data when clicked.
Here is how I prepared things:
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
$selectquery = "SELECT * FROM cases_reports";
$query = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($query);
while($res = mysqli_fetch_array($query)) {
?>
<tr>
<td class="name mb-0 text-sm"> <?php echo $res['cccEmployee']?> </td>
<td> <?php echo $res['irNumber']?> </td>
<td> <?php echo $res['caseType']?> </td>
<td> <?php echo $res['startDateTime']?> </td>
<td> <?php echo $res['endDateTime']?> </td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"> <?php echo $res['caseType']?> </h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
echo $res['caseType'];
?>
</div>
</div>
<?php }?> <!-- End php While -->
Of course, the modal shows the first data available, which in this case "accident". How can I show each data's info when the modal URL is clicked?

Answer 1

just call your modal programmatically from js and load/replace its corresponing data before showing modal.
<?php echo $res['caseType']?>
and in your js file :
$(document).ready(function(){
$("#modalLuncher").click(function(){
$("#modal-title-default").html('read from #modalLuncher data-* tag');
// $("#other-replacements") ;
$("#modal-default").modal();
});
});

Answer 2

I wanted to show the modal so I can Ajax edit the table.
Here what I did:
Script:
$(document).ready(function() {
// Append values in input fields
$(document).on('click', 'a[data-role=update]', function(){
var id = $(this).data('id');
var cccEmployee = $("#"+id).children('td[data-target=cccEmployee]').text();
var irNumber = $("#"+id).children('td[data-target=irNumber]').text();
var caseType = $("#"+id).children('td[data-target=caseType]').text();
var startDateTime = $("#"+id).children('td[data-target=startDateTime]').text();
var endDateTime = $("#"+id).children('td[data-target=endDateTime]').text();
//Append the variables
$('#cccEmployee').val(cccEmployee);
$('#IR_number').val(irNumber);
$('#case_type').val(caseType);
$('#startDate').val(startDateTime);
$('#endDate').val(endDateTime);
$('#caseId').val(id);
$('#reportsModal').modal('toggle');
});
//Create event to get data from fields and update.
$('#save_report_changes').click(function() {
var id = $('#caseId').val();
var cccEmployee = $('#cccEmployee').val();
var irNumber= $('#IR_number').val();
var caseType = $('#case_type').val();
var startDateTime = $('#startDate').val();
var endDateTime = $('#endDate').val();
$.ajax({
url: '/edit-report',
method: 'post',
data: {
id: id,
cccEmployee: cccEmployee,
irNumber: irNumber,
caseType: caseType,
startDateTime: startDateTime,
endDateTime: endDateTime
},
success: function(response) {
$("#"+id).children('td[data-target=cccEmployee]').text(cccEmployee);
$("#"+id).children('td[data-target=irNumber]').text(irNumber);
$("#"+id).children('td[data-target=caseType]').text(caseType);
$("#"+id).children('td[data-target=startDateTime]').text(startDateTime);
$("#"+id).children('td[data-target=endDateTime]').text(endDateTime);
$('#reportsModal').modal('toggle');
},
});
});
});
Then created a while loop in php to display the data + linking the edit button to the ajax:
<!-- Start PHP While -->
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
if( isset($_POST['id']) ) {
$id = $_POST['id'];
$ccc_employee = $_POST['cccEmployee'];
$IR_number = $_POST['irNumber'];
$case_type = $_POST['caseType'];
$caseLocation = $_POST['caseLocation'];
$startDate = $_POST['startDateTime'];
$endDate = $_POST['endDateTime'];
$case_description = $_POST['caseDesc'];
$action_taken = $_POST['actionsTaken'];
$details = $_POST['caseDetails'];
$notes = $_POST['caseNotes'];
$recommendation = $_POST['caseRecommendation'];
// Query to update data
$result = mysqli_query($mysqli, "UPDATE cases_reports SET
cccEmployee='$ccc_employee',
irNumber='$IR_number',
caseType='$case_type',
caseLocation='$caseLocation',
startDateTime='$startDate',
endDateTime='$endDate',
caseDesc='$case_description',
actionsTaken='$action_taken',
caseDetails='$details',
caseNotes='$notes',
caseRecommendation='$recommendation'
WHERE id='$id'");
if( $result ) {
return "Data updated successfully";
}
}
$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($table);
while($res = mysqli_fetch_array($table)) {
?>
<tr id="<?php echo $res['id']?>">
<td data-target="cccEmployee"> <?php echo $res['cccEmployee']?> </td>
<td data-target="irNumber"> <?php echo $res['irNumber']?> </td>
<td data-target="caseType"> <?php echo $res['caseType']?> </td>
<td data-target="startDateTime"> <?php echo $res['startDateTime']?> </td>
<td data-target="endtDateTime"> <?php echo $res['endDateTime']?> </td>
<td class="table-actions">
<a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
<i class="fas fa-edit"></i>
</a>
<!-- <a href="#!" class="table-action table-action-delete" data-toggle="tooltip" data-original-title="Delete product">
<i class="fas fa-trash"></i>
</a> -->
</td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<div class="modal fade" id="reportsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"> Case Details </h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="case-data">
<div class="form-row">
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="cccEmployee">CCC Employee</label>
<input type="text" class="form-control" id="cccEmployee" name="cccEmployee">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="IR_number">IR Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="IR_number">IR#</span>
</div>
<input type="number" class="form-control" name="IR_number" id="IR_number">
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_type">Case Type</label>
<select class="form-control" name="case_type" id="case_type" data-toggle="select">
<option value="" disabled selected>Select Case Type</option>
<option value="Accident">Accident</option>
<option value="Theft">Theft</option>
<option value="Death">Death</option>
<option value="Harrasment">Harrasment</option>
<option value="badBehaviour">Bad Behaviour</option>
<option value="Drugs">Drugs</option>
<option value="Drunk">Drunk</option>
<option value="Fight">Fight</option>
<option value="Medical">Medical</option>
<option value="illegalEntry">Illegal Entry</option>
<option value="illegalWorker">Illegal Worker</option>
<option value="Fire">Fire</option>
<option value="Electric">Electric</option>
<option value="illegalHunting">Illegal Hunting</option>
<option value="oilLeak">Oil Leak</option>
<option value="petrolLeak">Petrol Leak</option>
<option value="Kidnapping">Kidnapping</option>
<option value="Blackmail">Blackmail</option>
<option value="Misunderstanding">Misunderstanding</option>
<option value="propertyDamage">Property Damage</option>
<option value="smoke_NoFire">Smoke, No Fire</option>
<option value="stuck_InElevator">Stuck in Elevator</option>
<option value="Scooter">Scooter</option>
<option value="Drifting">Drifting</option>
<option value="LostPerson">Lost Person</option>
<option value="Fraud_Forgery">Fraud/Forgery</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="caseLocation">Location</label>
<select class="form-control" name="caseLocation" id="caseLocation" data-toggle="select">
<option value="" disabled selected>Select Location</option>
<option value="Baylasun">Baylasun</option>
<option value="Baylasun Hotel">Baylasun Hotel</option>
<option value="AL-Waha">AL-Waha</option>
<option value="Al-Morooj">Al-Morooj</option>
<option value="Royal Green">Royal Green</option>
<option value="Beach Towers">Beach Towers</option>
<option value="Emmar Building">Emmar Building</option>
<option value="Industrial Area (East)">Industrial Area (East)</option>
<option value="Industrial Area (West)">Industrial Area (West)</option>
<option value="Hejaz Gate">Hejaz Gate</option>
<option value="Gate 3">Gate 3</option>
<option value="Marina 1">Marina 1</option>
<option value="Marina 2">Marina 2</option>
<option value="Marina 3">Marina 3</option>
<option value="Tala Garden">Tala Garden</option>
<option value="AL-Shorooq">AL-Shorooq</option>
<option value="Yam Beach">Yam Beach</option>
<option value="Sales Center">Sales Center</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="startDate">Start Date & Time</label>
<input class="form-control" type="datetime-local" name="startDate" id="startDate">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="endDate">End Date & Time</label>
<input class="form-control" type="datetime-local" name="endDate" id="endDate">
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_description">Case Description</label>
<textarea class="form-control" name="case_description" id="case_description" rows="3"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="action_taken">Actions Taken</label>
<textarea class="form-control" name="action_taken" id="action_taken"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="details">Details</label>
<textarea class="form-control" name="details" id="details"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="recommendation">Recommendations</label>
<textarea name="recommendation" id="recommendation" class="form-control"></textarea>
</div>
</div>
<input type="hidden" id="caseId" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<button type="button" id="save_report_changes" class="btn btn-primary">Save changes</button>
</div>
<?php } //End php While