Dynamically Populating each rows from database using php-Ajax

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.

Why are you using fetch_array twice?

Palash
– Palash

2016-09-22 09:08:16 +00:00
Commented Sep 22, 2016 at 9:08 — Palash
– Palash, Commented Sep 22, 2016 at 9:08

Maths RkBala · Accepted Answer · 2016-09-22 09:38:25Z

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>

answered Sep 22, 2016 at 9:38

Maths RkBala

2,1953 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Mukoro Over a year ago

thanks, it works, Instead of changing the $(".js-sel-box-ajax-result-"+result_id).html(data3); I can still use $(".staffno-"+result_id).html(data3); It works. Thanks a million.

Maths RkBala Over a year ago

@Dave Welcome :-)

David Mukoro Over a year ago

just asking, is there a way of adding a modal form to this page, so that when a button details is clicked , it will open a modal form and send the information to that page? I will appreciate your kind assistance

madalinivascu · Accepted Answer · 2016-09-22 10:11:45Z

0

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>

edited Sep 22, 2016 at 10:11

answered Sep 22, 2016 at 9:08

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

1 Comment

David Mukoro Over a year ago

this is working but affects only the first corresponding row. ie if i select row1 name, it gives the staffno of row1, when i do the same on row2 name, it changes the staff no of row1, instead of dispalying teh result for each rows.

Veshraj Joshi · Accepted Answer · 2016-09-22 10:37:39Z

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

Collectives™ on Stack Overflow

Dynamically Populating each rows from database using php-Ajax

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related