jquery ajax從鏈接傳遞變量

Question

我正在嘗試將鏈接中的變量傳遞給ajax，但我不能這樣做。

這是我正在處理的代碼：

<script type="text/javascript">
    $(function(){
    $(".btn-show-modal").click(function(e){
      e.preventDefault();
      $("#dialog-example").modal('show');
    });

    $("#btn-delete").click(function(e) {
      var id = $(this).attr('data-id');
      $.ajax({
        type:"POST",
        data: { id : id },
        url:"delete-project.php",
        success:function(result){
          $("#dialog-example").modal('hide');
        }
      });


    });

    });
</script>

<table class="table table-bordered">
    <tr>
        <td>Project Code</td>
        <td>Description</td>
    </tr>
<?php
    $stmt2 = $conn->prepare( "SELECT project_code, description FROM tblprojects" );
    $stmt2->execute();

    for($i=0; $row2 = $stmt2->fetch(); $i++){
        $project = $row2['project_code'];
    $desc = $row2['description'];?>

    <tr class="record" id="record-">
        <td>
            <a href="project-detail.php?code=<?php echo $project; ?>"><?php echo $project; ?></a>
        </td>
        <td><?php echo $desc; ?></td>
        <td>
            <a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
                <i class="icon-edit icon-white"></i>
            </a>
        </td>
        <td>
            <a href="#" data-id="<?php echo $project; ?>" id="<?php echo $project; ?>" class="btn-show-modal" data-toggle="modal" title="Delete record">
                <i class="icon-trash icon-white"></i>
            </a>
        </td>

        <div class="modal hide fade" id="dialog-example">
            <div class="modal-header">
                <h5>Confirm Delete</h5>
            </div>

            <div class="modal-body">
                <p class="modaltext">Are you sure you want to delete this record?</p>
            </div>    
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn btn-info">No<a>
                <a data-id="<?php echo $project; ?>"  class="btn btn-danger" id="btn-delete">Yes<a>
            </div>
        </div>
    </tr>
    <?php 
    } 
    ?>
</table>

我有一個表有一個刪除列，如果單擊它，將出現一個確認模式，有2個選項是或否。 如果單擊是，我需要刪除該記錄並關閉模式，顯示結果而不刷新頁面。 我怎樣才能做到這一點？ 我嘗試使用ajax，我不知道我是否正確使用它。 非常感謝您的幫助。 謝謝。

Answer 1

ID必須是唯一的更改為類而使用$（this）.data（“id”）

您也可能想要隱藏頁面中已刪除的數據

<a data-id="<?php echo $project; ?>" 
class="btn btn-danger btn-delete">Yes<a>


$(".btn-delete").on("click",function(e) {
  e.preventDefault(); // cancel the link
  var id = $(this).data('id');
  $.ajax({
    type:"POST",
    data: { id : id },
    url:"delete-project.php",
    success:function(result){
      $(this).closest("tr").remove(); // remove the row from view
      $("#dialog-example").modal('hide');
    }
  });
});

最后，我建議您在頁面上只有一個對話框，並將ID傳遞給刪除和ID或行

將數據傳遞到jQuery UI對話框

Answer 2

ID必須在DOM中是唯一的。 你有多個鏈接id="btn-delete" 。 這就是您的代碼無法正常工作的原因

將其更改為類，如下所示

在你的標記中：

<a data-id="<?php echo $project; ?>" class="btn btn-danger btn-delete">Yes<a>

在你的jQuery中：

$(".btn-delete").click(...);

Answer 3

您只是在執行刪除成功事件時隱藏模態。 您還必須從表中刪除該行。 您可以像這樣刪除它：

$(this).parents('tr').remove();

更新：

以下代碼已經過測試並且正在運行。 如果仍有錯誤，則應打開firebug並報告錯誤消息。 您的代碼中存在一些基本的語法問題或錯誤，我在此解決方案中更正了一些問題，但您應該查看教程或文檔，以了解提供良好結構化代碼的基本和良好實踐。

只需用php循環替換下面的html表行（tr）即可生成行。

<!-- place your modal out of a table. In a table you have tr and td, no div. 
By the way you just need 1 modal for all rows -->
<div class="modal hide fade" id="dialog-example">
        <div class="modal-header">
          <h5>Confirm Delete</h5>
        </div>

        <div class="modal-body">
          <p class="modaltext">Are you sure you want to delete this record?</p>
        </div>    

        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn btn-info">No</a>
            <a href="#" data-id="<?php echo $project; ?>" class="btn btn-danger" id="btn-delete">Yes</a>
        </div>
</div>




<table class="table table-bordered">
  <tr>
      <th>Project Code</th>
      <th>Description</th>
      <th>Actions</th>
  </tr>
  <tr class="record" id="record-1">
      <td>
          <a href="project-detail.php?code=<?php echo $project; ?>">project1</a>
      </td>
      <td>description</td>
      <td>
          <a href="update-project.php?code=proj1" title="Update record">
              <i class="icon-edit icon-white"></i>
         </a>
         <a href="#" data-id="proj1"  id="proj1"  class="btn-show-modal" data-toggle="modal" title="Delete record">
             <i class="icon-trash icon-white"></i>
         </a>
      </td>      
  </tr>
  <tr class="record" id="record-2">
      <td>
          <a href="project-detail.php?code=proj2">project2</a>
      </td>
      <td>description</td>
      <td>
          <a href="update-project.php?code=proj2" title="Update record">
             <i class="icon-edit icon-white"></i>
         </a>
         <a href="#" data-id="proj2"  id="proj2"  class="btn-show-modal" data-toggle="modal" title="Delete record">
             <i class="icon-trash icon-white"></i>
         </a>
      </td>      
  </tr>
</table>

<script>
$(function(){
    $(".btn-show-modal").click(function(e){
      e.preventDefault();
      var btnDelete = $("#btn-delete");
        //show the modal
      $("#dialog-example").modal('show');
        //save the id to delete if confirmed
        var id=$(this).attr('data-id');
      btnDelete.data('toRemove', id); 
      return false;
    });

//action when clicking YES
    $("#btn-delete").click(function(e) {
      var id =  $("#btn-delete").data('toRemove');
        alert(id);
      $.ajax({
        type:"POST",
        data: { id : id },
        url:"delete-project.php",
        success:function(result){
          //hide the modal
          var modal = $("#dialog-example");
          modal.modal('hide');
          var btnDelete = $("#btn-delete");
          //remove the saved id
          var id= btnDelete.data('toRemove');
          //remove the row dynamically
          $("#"+id).closest('tr').remove();
        },
        error:function( jqXHR, textStatus  ) {
          alert( "Request has failed! ; " + jqXHR.status + " / "+textStatus);
        }
      });
    });
  });
</script>