如何從Popover中獲取ID，當我們單擊表格行時打開。

Question

該表從數據庫中提取記錄。我想添加更新功能。所以我決定添加一個引導popover來使行可編輯。所以當用戶點擊地址時，彈出窗口會顯示一個允許用戶更新地址的字段。

單擊編輯將更新地址。

問題 我不知道怎麼搶的地址和ID單擊行，以便我可以養活的信息，SQL UPDATE語句。

下面是編輯按鈕

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

    }); 

代碼，這樣，當我點擊編輯ITN只是提醒第1行的值。

這是我的所有代碼。

<?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 
    });