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或行到

Passing data to a jQuery UI Dialog

Answer 2

您的DOM中的ID必须是唯一的。您有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>

jquery ajax从链接传递变量

3 个答案: