Retrieving table row information using ajax and pdo to display in bootstrap modal - ajax

Question

Im trying to retrieve information from a table which is populated by a PDO array into a html table. I want to grab the row information when a user clicks on the 'delete button' for that row into a modal which i have for the delete confirmation.
I'm not sure how to go about doing this because the information returned is from the database and not hard-coded in.
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
Course Code
</th>
<th class="text-center">
Course Title
</th>
</tr>
</thead>
<tbody>
<?php foreach ($courses as $row) {
echo "<tr><td>";
echo $row['course_code'];
echo "</td><td>";
echo $row['course_title'];
echo "</td><td>";
echo '<p data-placement="top"
data-toggle="tooltip"
style="margin-left:18px"
title="Delete">';
echo '<button class="btn btn-danger btn-xs"
data-title="Delete"
data-toggle="modal"
data-target="#delete">';
echo '<span class="glyphicon glyphicon-trash" />';
echo '</button></p>';
echo "</tr>"; }
?>
this is the code for the modal:
<div id="delete" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Record</h4>
</div>
<div class="modal-body">
<p class="text-danger"><small>Are you sure you would like to delete this record?</small></p>
<p class="text-danger"><small>You will not be able to un-do this action</small></p>
<div class="form-group">
<input class="form-control " type="text" placeholder="Course Title">
</div>
</div>
<div class="modal-footer">
<button id="can" type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button id= "upd" type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
I know i will need AJAX to do this dynamically. Does anyone have any ideas of a solution? thanks

Answer 1

Here's the solution.
http://getbootstrap.com/javascript/#modals-related-target
You should add a new data attribute here:
'<button class="btn btn-danger btn-xs"
data-title="Delete"
data-index="yourItemIndex" <----- here
data-toggle="modal"
data-target="#delete">';
Your script should be something like this:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Best regards.