如何从我们单击 table 行时打开的 Popover 获取 ID。

Question

这 table 从数据库中提取记录。我想添加更新功能。所以我决定添加一个 bootstrap 弹出窗口来制作行 editable。因此，当用户单击地址时，弹出窗口会出现一个允许用户更新地址的字段。

单击“编辑”将更新地址。

问题我不知道如何获取点击行的地址和 ID 所以我可以将信息提供给 sql 更新语句。

这是编辑按钮的代码

    $(document).on("click", ".sucess", function() {
           var address = $("#address").attr('value');
          alert(address);

    });

因此，当我单击“编辑”时，它只会提醒第一行的值。

这是我的全部代码。

<?php
    $con = mysqli_connect("localhost","root","","test");

 // Check connection
  if (mysqli_connect_errno())
      {
     echo "Failed to connect to MySQL: " . mysqli_connect_error();
         }else {
        echo "";
   }
     ?>

       <!--QUERY-->
      <?php
     $prepare_query = "SELECT * FROM customers";

         $result = mysqli_query($con, $prepare_query);

       ?>
        <table id="stock-table" class="display">
       <thead>
       <tr>
       <th>Customer Name</th>
       <th>Address</th>
       </tr>
      </thead>
      <tbody>
      <?php


      while($row = mysqli_fetch_array($result)) {    
      ?>
      <div id="userlog" class="operator">
       <tr>
       <td><?php echo $row['CustomerName']?></td>
       <td>  
        <a href="#" class="btn-row-popup-menu row"><?php echo 
       $row['CustomerAddress1']?>
      <div style="display:none;">
        <div class="btn-row-popup-menu-body">
          <input type="text" class = "name"   id="address"value = "<?php echo $row['CustomerAddress1']?>" >
           <button class="btn-success sucess"> EDIT</button>
           <button class="transaction-menu-legend delete" id="delete"> DELETE</button>
        </div>
      </div>
   </a>
  </td>
</tr>
</div> 


<?php
}
?>
 </tbody>
</table>
<script>
       $(document).ready(function() {
   $('#stock-table').DataTable();
  } );

   //wHEN CLICK ON THE EDIT BUTTON INSIDE THE POPOVER

    $(document).on("click", ".sucess", function() {
             var address = $("#address").attr('value');
            alert(address);

       });

  </script>



    <!-- POPOVER -->
  <script>
 // Popover Menu initialize
   $('.btn-row-popup-menu').popover({
   placement: 'right',
     trigger: 'click',
    html: true,
    title: function() {
    return $(this).parent().find('.btn-row-popup-menu-head').html();
    },
 content: function() {
   return $(this).parent().find('.btn-row-popup-menu-body').html();
 }

   }).on('show.bs.popover', function(e) {
    if (window.activePopover) {
   $(window.activePopover).popover('hide')
   }
    window.activePopover = this;
    currentPopover = e.target;

  }).on('hide.bs.popover', function() {
 window.activePopover = null;
  });
  // Close popover when clicking anywhere on the screen
  $(document).on('click', function(e) {
   $('[data-toggle="popover"],[data-original-title]').each(function() {
     //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    var target = $(e.target);
    if (!target.is('.popover') && !target.is('.popover *') && 
     !target.is('.btn-row-popup-menu') || target.is('.btn-popover-close')) {
     (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click 
   = false;
   }
 });
 });
   // Anchor popover to opening element
    $(window).resize(function() {

     console.log(currentPopover);

     if (currentPopover.data('bs.popover').tip().hasClass('in') == true) {
    currentPopover.popover('hide');
     currentPopover.popover('show');
   }
  });
 </script>

Answer 1

您可以为每个客户创建简单的表单，在其中将客户 ID 作为隐藏字段。在您提醒地址的地方，您可以访问地址和 ID，然后使用 ajax 进行 sql 更新。表单示例 -

        <div id="userlog" class="operator">
           <tr>
           <td><?php echo $row['CustomerName']?></td>
           <td>  
            <a href="#" class="btn-row-popup-menu row"><?php echo 
           $row['CustomerAddress1']?>
            <div style="display:none;">
            <div class="btn-row-popup-menu-body">
                <form method="POST">
               <input type="hidden" name="customerId" value="<?php echo $row['CustomerID']?>" >
               <input type="text" class = "name"   id="address" value = "<?php echo $row['CustomerAddress1']?>" >
               <button class="btn-success sucess"> EDIT</button>
               <button class="transaction-menu-legend delete" id="delete"> DELETE</button>
               </form>
            </div>
       </a>
      </td>
    </tr>
    </div>

和脚本：

        $(document).on("click", ".sucess", function() {
        var address = $(this).parent().find('input[name="address"]').val();
        var custId =  $(this).parent().find('input[name="customerId"]').val();
        alert(address);
        alert(custId);

        // send these via ajax
   });

如何从我们单击 table 行时打开的 Popover 获取 ID。

How to get ID from Popover which opens when we click on table row.

javascript

php

popover