I have a simple table that by default shows a single row, with an add button for users to add additional rows if required. I have a script that fires when the input in the first column changes, however this only works for the first table row and doesn’t fire for any rows the user has added themselves.
I understand the issue is in this answer and relates to the elements that exist when the page is first loaded, but I can’t work out how to implement that solution in my example as I’m only just learning Javascript and jQuery here.
Here’s how my table looks currently:
$(document).ready(function() {
$("#addRow").click(function() {
var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial\" name=\"serialNumber\"></td><td class=\"ID\"></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
$("#shipmentItems").append(markup);
});
// Find and remove selected table rows
$("#shipmentItems").on("click", ".deleteRow", function() {
$(this).closest('tr').remove();
});
});
$(document).ready(function() {
$(".form-control.serialNumber").change(function() {
console.log('starting get Asset Details request');
var serialNumber = $(this).val();
// Create a reference to $(this) here:
$this = $(this);
$.post('getAssetDetails.php', {
type: 'getAssetDetails',
serialNumber: serialNumber
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = ajaxError + '. Please check the Serial Number and try again';
$this.closest('td').addClass("has-error");
$this.closest('tr').children('.ID').html('');
$this.closest('tr').children('.code').html('');
$this.closest('tr').children('.description').html('');
return; // stop executing this function any further
} else {
$this.closest('td').removeClass("has-error");
assetID = data[0].assetID;
productCode = data[0].productCode;
description = data[0].description;
$this.closest('tr').children('.assetID').html(ID);
$this.closest('tr').children('.productCode').html(code);
$this.closest('tr').children('.description').html(description);
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error retrieving the Item Details - AJAX request error. HTTP Status: ' + httpStatus + '. ';
$this.closest('td').addClass("has-error");
});
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
<thead>
<th class="text-center" scope="col" width="20%">Serial</th>
<th class="text-center" scope="col" width="15%">ID</th>
<th class="text-center" scope="col" width="15%">Code</th>
<th class="text-center" scope="col" width="45%">Description</th>
<th class="text-center" scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial" name="serialNumber"></td>
<td class="ID"></td>
<td class="code"></td>
<td class="description"></td>
<td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> >Solution :
Since the rows that are added dynamically wont fire the change event you have going on you will need to bind an on event to the document.
Replace
$(".form-control.serialNumber").change(function() {
With
$(document).on('change', '.form-control.serialNumber', function() {