I am trying to create a way to edit rows in my DataTable implementation. I'm using AdminLTE BootStrap.
In this iteration I have a button at the end of each row that launches a modal. I would like the button to populate the data in the modal and essentially fill out the form with the row data so that the user can make any changes and Post them again.
What I have below "works" in that it does update the form, however it is only picking the last item in the While loop of my PHP which makes sense.
How can I update the form with the correct data from the row where the Edit button was clicked? There has to be a way to send specific data without interrupting the loop to still show the data table.
Table call
<table id="buildTracker" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Tracker ID</th>
<th>INI</th>
<th>Owner</th>
<th>Entered By</th>
<th>Record ID</th>
<th>Record Name</th>
<th>Items</th>
<th>Feature</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["ID"]."</td><td>".$row["INI"]."</td><td>".
$row["Owner"]."</td><td>".
$row["EnteredBy"]."</td><td>".
$row["RecordID"]."</td><td>".$row["RecordName"]."</td><td>".
$row["Items"]."</td><td>".$row["Feature"]."</td><td>";
echo '<button type="button" id="edit" onclick="update()" class="btn btn-default" data-toggle="modal" data-target="#modal-default">';
echo 'Edit';
echo '</button>'.'</td>';
echo "</tr>";
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
}
} else {
echo "0 results";
}
$conn->close();
?>
...
Modal and Form
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<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">Default Modal</h4>
</div>
<div class="modal-body">
<form id="buildtrackerform" role="form" action="formSubmit.php" method="post">
<div class="box-body">
<div class="form-group">
<div class="row">
<div class="col-xs-5">
<label for=>Entered By</label>
<input type="text" class="form-control" name="enteredBy" id="enteredBy" placeholder="Entered By">
</div>
<div class="col-xs-2">
<label for="ini">INI</label>
<select onChange="setOwner(this)" style="text-transform: uppercase;" class="form-control select2" style="width: 100%;" name="ini" id="ini">
<option selected="selected" disabled="disabled">-Select-</option>
</select>
</div>
<div class="col-xs-5">
<label for="owner">Owner</label>
<input type="text" class="form-control" name="owner" id="owner" placeholder="Nemours Owner">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="recordID">Record ID</label>
<input type="text" class="form-control" name="recordID" id="recordID" placeholder="Record ID">
</div>
<div class="col-xs-6">
<label for="recordName">Record Name</label>
<input type="text" class="form-control" name="recordName" id="recordName" placeholder="Record Name">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label>Items</label>
<select multiple class="form-control select2" name="items[]" id="items[]" data-placeholder="  Type an item then press enter"
style="width: 100%;">
</select>
</div>
</div>
</div>
<!-- There are more fields - I removed them for the question -->
</div><!-- End Box Body -->
</div> <!-- End Modal Body -->
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
And just in case the DataTable script
<script>
$(function () {
$('#example1').DataTable()
$('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
})
})
</script>
Any guidance is appreciated. Thanks!
Remove the onclick property of your button and then give it a class. Lets say tableButton for this example. Then modify your javascript:
$(function () {
$('#example1').DataTable()
var table = $('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
});
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
// data now contains your row data, insert it where you like
})
})
EDIT
A couple of pointers for you. In your original code you should remove this bit as you are currently outputting it repeatedly for every row in your database:
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
My original code snippet didn't include anything to handle the data, without seeing your table I can't be exact but within the $('.tableButton').click function the variable data will be an array containing the values for each column of your table on the row which the button was clicked. If you modify the function to look like this you will get the idea:
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
alert( 'First column is '+data[0]+' Second column is '+data[1] );
})
Once you have figured out which column goes where then you change the alert to some code which inserts the values in the relevant inputs on your form.
I used multiple data tags in this instance. I think it is similar to miknik's suggestion but not using the data() function. Echo'd the following in the button's creation.
data-id="'.$row["ID"].'" data-enteredBy="'.$row["EnteredBy"].'"
Then threw this into the JS on the bottom
<script>
$('#modal-default').on('show.bs.modal', function (e) {
var rowID = $(e.relatedTarget).attr('data-id');
$(this).find('#rowID').val(rowID);
var enteredBy = $(e.relatedTarget).attr('data-enteredBy');
$(this).find('#enteredBy').val(enteredBy);
//pass multiple data with data()
});
</script>