I know this has been asked a lot but I haven't found any of the answers to the issue to be very fruitful. I essentially have a table inside a view that is displayed using a foreach loop in PHP, this spits out the records one by one and appends some 'Action' buttons in the last column (download, delete and edit). The download and delete functions work perfectly, I just pass the ID in from each record in the foreach loop, job done.
I'm having a lot of issues with my modal though, it only ever displays the data from the first record when I echo the data in the 'value' field of each input. I'm really stumped on how to make this functionality work (JQuery is not my strongest language). I've seen some responses talking about Ajax, but I'd rather not use Ajax in this project. I'm using the codeigniter framework also for some more info.
I think the issue is that the modal is only created once when the foreach loop starts running, hence why it only ever has the first record data inside the modal, any help to get around this so I can edit each individual record inside the table would be great! Thanks for the help.
HTML/PHP:
<div class="container" id="widecontainer">
<h1 id="title">VMS Failure Records</h1>
<br>
<!-- print table with results onto view.php -->
<table class="table table-bordered" id="record">
<?php if($results) : ?>
<thead>
<tr style="background-color: #d3d3d3;">
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- foreach result place it in row in table -->
<?php foreach($results as $res) : ?>
<tr>
<td><?php echo $res['id'] ?></td>
<td><?php echo $res['vsm_sn'] ?></td>
<td><?php echo $res['vm_sn'] ?></td>
<td><?php echo $res['project'] ?></td>
<td><?php echo $res['site'] ?></td>
<td><?php echo $res['install_location'] ?></td>
<td><?php echo $res['observed_during'] ?></td>
<td><?php echo $res['comments'] ?></td>
<td><?php echo $res['reported_by'] ?></td>
<td><?php echo $res['replaced_with'] ?></td>
<td><?php echo $res['date'] ?></td>
<td><?php echo $res['classification'] ?></td>
<td>
<?php echo form_open('/pages/delete/'. $res['id']); ?>
<button type="submit" class="btn btn-danger delete_btn" id="delete_btn" target="#confirmation">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<!-- Modal displays when user clicks delete, asking them to confirm the deletion -->
<div id="confirm" name="confirm" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Record <i class="fa fa-trash" aria-hidden="true"></i></h4>
</div>
<div class="modal-body">
<p style="color: red;"><strong>Deleting this record will delete .PDF and QRCode Data.</strong></p>
<p>Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!--Modal displays to allow user to download the selected record. -->
<?php echo form_open('/pages/downloadFile/'. $res['id']); ?>
<button type="submit" class="btn btn-primary" alt="Download .pdf">
<i class="fa fa-download" aria-hidden="true"></i>
</button>
</form>
<form>
<button type="button" class="btn btn-success update_btn" id="update_btn" data-toggle="modal" data-target="#myModal"
vsm-sn="<?php echo $res['vsm_sn'];?>" record-id="<?php echo $res['id']; ?>">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update Record</h4>
</div>
<div class="modal-body">
<form id="profileForm">
<input type="hidden" class="form-control" name="id" value="">
VSM SN : <input class="form-control" name="vsm_sn" value="" placeholder="VSM SN">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
<!-- If there are no results, display table headings and message -->
<?php elseif(!$results) : ?>
<thead>
<tr>
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
</tr>
</thead>
<tbody>
<h3 style="color: red;">No Results to Display</h3>
</tbody>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
JQUERY:
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var vsm_sn=$(opener).attr('vsm-sn');
//set what we got to our form
$('#profileForm').find('[name="vsm_sn"]').val(vsm_sn);
});
