CODEWITHSUNDEEP
javascriptphpjquerymysql
Alvin
Alvin

Reputation: 539

jQuery form button in dynamic table doesnt detect 2nd row onwards

i have a file that generate dynamic table based on the records in database. and next to each row, I put a button to delete the row. My code now works well but only with the first row. Starting from row 2 onwards, the jquery wont detect the particular row clicked.

this is my php file

while ($row = mysqli_fetch_array($queryresult)){
               $id          = $row['requestID'];
               $customerID  = $row['userID'];
               $username    = $row['username'];
               $amount      = $row['amount'];
               $time        = $row['requested_at']; 
               $status      = $row['status'];

                //display out the results to the user
                echo "<tr>";
                echo "<td> $username </td>";
                echo "<td> $amount </td>";
                echo "<td> $time </td>";
                echo "<td> $status </td>";
                echo "<td> <form method='POST'>
                            <input type='hidden' name='wdID' id='wdID' value='".$id."'/>
                            <input type='hidden' name='customerID' id='customerID' value='".$customerID."'/>
                            <input type='hidden' name='amount' id='amount' value='".$amount."'/>
                            <button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
                           </form>
                      </td>";
                echo "</tr>";

        }
            mysqli_free_result($queryresult); 
            mysqli_close($connection); //close the database

and this is my javascript file

$("#acceptWD").click(function(event){
    event.preventDefault();
    var self = $(this);
    var wdID = $(this).$("#wdID").val();
    var customerID = $("#customerID").val();
    var amount = $("#amount").val();
    console.log(wdID);
        $.ajax({
          type: 'POST',
          url: 'process_withdraw_request.php',
          data: {wdID:wdID, customerID:customerID, amount:amount},
          success: function(result){
            //console.log(result);
            if(result){
                $.notify({
                    // options
                    message: 'The Request Has Been Accepted' 
                },{
                    // settings
                    delay: 2000,
                    allow_dismiss: false,
                    placement: {
                        from: "top",
                        align: "center"
                    },
                    type: 'success'
                })
                setTimeout(function(){
                   window.location.reload(1);
                }, 4000);
            }
          }
        });
});

I tried to use following code but still nothing

$("#acceptWD").on('click', function(){
var a = $(this).closest('tr').val();
    console.log(a);
});

Please help and thank you

Upvotes: 0

Views: 74

Answers (3)

dsdsdsdsd
dsdsdsdsd

Reputation: 2962

As the others mentioned, you are using identical identifiers for each row. So you need to add something to uniquely identify them each. In this example I have added a 'counter' in the php that is increased with each while loop; and that counter is fixed to the end of all identifiers.

Also I stored the value of each row's counter in a data- attribute: data-row_index, and I decided to put that attribute into the button's tag.

Then the jquery has to properly fetch the value.

I have not tested this, but this should get you going ....

// php
$row_counter = -1 ;
while ($row = mysqli_fetch_array($queryresult)){
$row_counter++ ;
// ...
 echo "<td>
         <form method='POST'
               >
           <input type  = 'hidden' 
                  name  = 'wdID' 
                  id    = 'wdID" . $row_counter . "' 
                  value = '".$id."' 
                  />
           <input type  = 'hidden'  
                  name  = 'customerID'  
                  id    = 'customerID" . $row_counter . "'  
                  value = '".$customerID."' 
                  />
           <input type  = 'hidden'  
                  name  = 'amount'  
                  id    = 'amount" . $row_counter . "'  
                  value = '".$amount."' 
                  /> 
           <button data-row_index = '" . $row_counter . "'
                   class = 'btn btn-success btn-xs'
                   id    = 'acceptWD" . $row_counter . "'
                   title = 'Accept Withdraw Request'  
                   type  = 'button'
                 >
              <i class=\"glyphicon glyphicon-ok\"></i>
           </button> 
        </form>
     </td>";
   // ...         


// jquery
$(".btn").click(function(event){
    event.preventDefault();
    var self       = $(this);
    var row_index  = self.attr( "row_index") ; 
    var wdID       = $("#wdID"       + row_index ).val();
    var customerID = $("#customerID" + row_index ).val();
    var amount     = $("#amount"     + row_index ).val();
    // ...
});

Upvotes: 0

caramba
caramba

Reputation: 22480

all these IDs will be the same in every row:

echo "<td> <form method='POST'>
    <input type='hidden' name='wdID' id='wdID' value='".$id."'/>
    <input type='hidden' name='customerID' id='customerID' value='".$customerID."'/>
    <input type='hidden' name='amount' id='amount' value='".$amount."'/>
    <button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
   </form>
</td>";

Now an ID has to be unique, if not, you brake something. So you might change those IDs to classes something like:

echo "<td> <form method='POST'>
    <input type='hidden' name='wdID' class='wdID' value='".$id."'/>
    <input type='hidden' name='customerID' class='customerID' value='".$customerID."'/>
    <input type='hidden' name='amount' class='amount' value='".$amount."'/>
    <button class=\"btn btn-success btn-xs acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
   </form>
</td>";

Then your javascript will look something like: 

$(".acceptWD").on('click', function(){
     var parentTd = $(this).closest('td');
     console.log(parentTd.find('.wdID').val());
});

Here is a simplified example

Upvotes: 2

Ramesh
Ramesh

Reputation: 1887

Javascript ID should unique. or else it will take first one.

<div id="targetID">I am first Element.<div>
<div id="targetID">I am second Element.<div>

<script>
$(function(){
alert($("#targetID").html());
});
</script>

Result: I am first Element.

Upvotes: -1

Related Questions