テーブル行をクリックすると開くPopoverからIDを取得する方法。

Question

このテーブルはデータベースからレコードを引き出します。私は更新機能を追加したい。だから私は行を編集可能にするためにブートストラップポップオーバーを追加することにしました。ユーザーがアドレスをクリックすると、Popoverにはユーザーがアドレスを更新できるフィールドが表示されます。

[編集]をクリックすると、アドレスが更新されます。

私は、SQL UPDATE文に情報を供給することができますので、私はそれのアドレスとIDをつかむ方法がわからない問題 は、行をクリックしました。ここで

は、だから私は編集をクリックしたときにITNが唯一の1行目の値を警告編集ボタン

$(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 
    });