Jquery select data-id from second row on table

问题: I've been trying to make a table with a list of users for a school project. I'm doing this with jquery, php and mysql. I'm retrieving all data from the mysql database and...

问题:

I've been trying to make a table with a list of users for a school project. I'm doing this with jquery, php and mysql.

I'm retrieving all data from the mysql database and printing it out in a table. now i'm trying to add an update button to i can easily update data for each specific row.

This however is not working as expected. It only selects the data from the same row. While the data-id value is different. Could anyone tell me why this is happening? I'll leave my code below for clearance

JS:

$(document).ready(function () {
   $(document).on('click', '#update-btn', function () {
       var id =$("[id='update-btn']").attr('data-id');
       var username = $('#username').val();
       var dob = $('#dob').val();
       var address = $('#address').val();

       $.ajax({
          url: 'ajax/update.php',
          method: 'POST',
          data: {
              ID: id,
              username: username,
              dob: dob,
              address: address
          },
          success: function (data) {
              if (data){
                  console.log(data);
                  swal({
                      title: 'Update successful',
                      icon: 'success',
                      text: 'User with ID ' + id + ' updated.'
                  });
                  setTimeout(function () {
                      window.location = 'medewerkers.php';
                  }, 5000)

              }
              else if (data === "update_failed"){

              }
          }
       });
   });
});

PHP:

public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" id="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" id="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" id="address"</td>
                <td><button type="button" class="btn btn-danger" id="delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning" id="update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}

}


回答1:

The problem is because your loop is causing multiple elements to have the same id, when id attributes must be unique within the DOM. To fix this use common classes on the elements within the loop, then DOM traversal to find them when the button is clicked.

public static function loadMedewerkers()
{
  $mysql = Database::DBCon()->prepare('SELECT * FROM medewerkers');
  $mysql->execute();
  while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
  {
    $html = '<tr>
      <td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
      <td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
      <td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
      <td>
        <button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
        <button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
    </tr>';
    echo $html;
  }
}
$(document).ready(function() {
  $(document).on('click', '.update-btn', function() {
    var $row = $(this).closest('tr');
    var id = $(this).data('id');
    var username = $row.find('.username').val();
    var dob = $row.find('.dob').val();
    var address = $row.find('.address').val();

    // ajax request here...
  });
});

Note the use of data() to retrieve the data attribute. Also note that you could put the data-id attribute itself on the tr instead of each button to DRY up the HTML slightly.


回答2:

You are using ID in your buttons when returning ID is unique for each object in the screen try using class something like this:

$(document).ready(function () {
   $(document).on('click', '.update-btn', function () {
       var id =$(this).data('id');
       var username = $(this).closest('tr').find('.username').val();
       var dob = $(this).closest('tr').find('.dob').val();
       var address = $(this).closest('tr').find('.address').val();

       $.ajax({
          url: 'ajax/update.php',
          method: 'POST',
          data: {
              ID: id,
              username: username,
              dob: dob,
              address: address
          },
          success: function (data) {
              if (data){
                  console.log(data);
                  swal({
                      title: 'Update successful',
                      icon: 'success',
                      text: 'User with ID ' + id + ' updated.'
                  });
                  setTimeout(function () {
                      window.location = 'medewerkers.php';
                  }, 5000)

              }
              else if (data === "update_failed"){

              }
          }
       });
   });
});



public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
                <td><button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}
}

same goes for your delete button

and use .data() instead of attr()

Also, in other columns for getting the username, dob and address you have to use class instead of id.

  • 发表于 2019-03-02 18:10
  • 阅读 ( 328 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除