Dynamically Populating each rows from database using php-Ajax - php

Question

I have a table that is dynamically populated from mysql database.User are expected to select a staff number, which automatically goes to the DB and fetches his staff number.I have like 10rows. it works fine for the first row but not the subsequent other others.
Please, take a look at the code and advice where I am missing it.
Thanks
<tr>
<th nowrap="nowrap">S/N</th>
<th nowrap="nowrap">VNO</th>
<th nowrap="nowrap">Name</th>
<th nowrap="nowrap">Staff No</th>
</tr>
<tr>
<?php
$c=0;
$st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'");
while($r = mysqli_fetch_array($st)){ $c++?>
<td><?php echo $c;?></td>
<td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
<td><select name="opname[]" class="form-control" id="subloc">
<option>Select...</option>
<?php
$fs = getOperators($_SESSION['location']);
while($f = mysqli_fetch_array($fs)){?>
<option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
<?php };?>
</select></td>
<td id="staffno"></td>
</tr>
Ajax side:
<script type="text/javascript">
$(document).ready(function() {
$("#subloc").change(function(){
var sname = $("#subloc option:selected").val();
$.ajax({
type:"POST",
url:"process-opno.php",
data:{opname:sname}
}).done(function(data3){
$("#staffno").html(data3);
});
});
});
</script>
The above fetches the first rows when subloc id is selected successfully into staffno id.
But it does not do it for the remaining lines. What can i do so, that it will recognise the second line, third line etc and fetches the corresponding staff number into the staffno id .
Thanks.

Answer 1

Please try this:
PHP Part I have added classes for select box and select box ajax result
<tr>
<?php
$c=0;
$st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'");
while($r = mysqli_fetch_array($st)){
$c++;
?>
<td><?php echo $c;?></td>
<td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
<td>
<select name="opname[]" class="form-control js-sel-box" data-id="<?php echo $c;?>">
<option>Select...</option>
<?php
$fs = getOperators($_SESSION['location']);
while($f = mysqli_fetch_array($fs)){
?>
<option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
<?php
};
?>
</select>
</td>
<td class="js-sel-box-ajax-result-<?php echo $c;?>"></td>
<?php
}//End While
?>
</tr>
Ajax Part:
<script type="text/javascript">
$(document).ready(function() {
$(".js-sel-box").change(function(){
var sname = $(this).val();
var result_id = $(this).attr("data-id");
$.ajax({
type:"POST",
url:"process-opno.php",
data:{opname:sname}
}).done(function(data3){
$(".js-sel-box-ajax-result-"+result_id).html(data3);
});
});
});
</script>

Answer 2

The same old problem with unique ids, change the id into a class,find all your elements based on the changed select
<script type="text/javascript">
$(document).ready(function() {
$("td select.form-control").change(function(){
var sname = $(this).val();
var el = $(this);
$.ajax({type:"POST",url:"process-opno.php",data:{opname:sname}})
.done(function(data3){
$(this).parent().next("td").html(data3);
});
});
});
</script>

Answer 3

Yes, its better to use class identifier instead of id to identify multiple DOM elements; but in yours it can be workable with minimum changes-
// use
var sname = $(this).val();
//put this line just var sname
var $object =$(this);
// instead of
var sname = $("#subloc option:selected").val();
// this is because- $('#subloc option:selected').val(); always returns the first
//dropdownList/optionlist from the DOM array, you can use `this` to track which DOM has been change recently
// another change in your code $object is $(this) equivalent but will not work inside ajax so you need to create $object as in code above..
// put this line
$($object).parents('tr').find("#staffno").html(data3);
//instead of
$("#staffno").html(data3);
// above line will search parent tr and will look for DOM element with id staffno a