Dave Dave - 2 months ago 5
PHP Question

Dynamically Populating each rows from database using php-Ajax

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

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>
Comments