jQuery用ajax Post方法追加和删除元素

-1

我想添加一个包含删除按钮的div列表元素，并在添加后删除它。当我尝试在添加该div后立即删除该div元素时，它将其从html中删除，但不会从服务器端删除。刷新页面时，我看到该元素，并且可以在刷新页面后将其删除。我的代码如下。我使用ajax.post方法发送服务器，并使用jquery post方法删除。jQuery用ajax Post方法追加和删除元素

$(function() { 
    $("button#formDepartment").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "addsomething.php", 
      data: $('form#newDepartment').serialize(), 
      success: function(data) { 
       document.getElementById("newDepartment").reset(); 
       idDep = data; 

      }, 
      error: function(){ 
       alert("failure"); 
      } 
     }); 

     var departmentName = $('#nameDepartment').val(); 

     var newDepartmentElem = 
      ' <div class="list-group-item" data-plugin="editlist"> \ 
      <div class="list-content"> \ 
       <span class="list-text">' + departmentName + '</span> \ 
       <div class="item-actions"> \ 
       <span class="btn btn-pure btn-icon" id="deleteDepartment" data-delete-id="' + idDep + '" ><i class="icon wb-trash" aria-hidden="true"></i></span> \ 
       </div> \ 
      </div> \ 
      </div>'; 

     $(newDepartmentElem).hide().appendTo("#departmentList").slideDown('slow'); 

    }); 

    $(document).on('click', 'span#deleteDepartment', function() { 
     var deleteId = $(this).data("delete-id"); 
     var removeItem = $(this).closest('.list-group-item'); 
     bootbox.dialog({ 
      message: "this department will be deleted.", 
      title: "Delete department", 
      buttons: { 
       success: { 
       label: "Delete", 
       className: "btn-success", 
       callback: function() { 
        $.post("deletesomething.php", 
        {itemId : deleteId, deleteItem : "department"} 
        ); 
        removeItem.slideUp(600); 
        toastr.error("Department deleted."); 
        console.log(deleteId); 
       } 
       }, 
       danger: { 
       label: "Cancel", 
       className: "btn-danger", 
       callback: function() { 
       } 
       } 
      } 
     }); 
    }); 
});

来源

2017-07-01 Yusuf ÇAKIRCA

检查你的后端代码，这个问题是存在的！ –

没有它的作品。我可以从其他页面使用它。我想我知道问题在哪里，但我不知道如何解决。也许你可以帮忙。在我的代码中，我添加了带有混合参数data-delete-id的新html div，因为它无法找到data-id并且无法发送到服务器。为了解决这个问题，我尝试了一个全局变量，它包含了ajax.post成功回调函数中的id。但它不起作用。我无法将该变量添加到我的代码中。如何在成功回调函数中创建一个全局变量？ –

当你插入时，你在某处返回'id'？或不！ –

如果你河畔返回的id是数据它的自我（idDep = data;），所有你需要做的就是把所有的代码Ajax请求里面，因为外界的请求像你一样将设置data-delete-id来回删除跨度undefined（您可以通过浏览器检查检查），所以，你所要做的就是把所有的代码如下成功函数内部：

$("button#formDepartment").click(function(){ 
    $.ajax({ 
     type: "POST", 
     url: "addsomething.php", 
     data: $('form#newDepartment').serialize(), 
     success: function(data) { 
      document.getElementById("newDepartment").reset(); 
      idDep = data; 

      var departmentName = $('#nameDepartment').val(); 

      var newDepartmentElem = 
       ' <div class="list-group-item" data-plugin="editlist"> \ 
       <div class="list-content"> \ 
        <span class="list-text">' + departmentName + '</span> \ 
        <div class="item-actions"> \ 
        <span class="btn btn-pure btn-icon" id="deleteDepartment" data-delete-id="' + idDep + '" ><i class="icon wb-trash" aria-hidden="true"></i></span> \ 
        </div> \ 
       </div> \ 
       </div>'; 

      $(newDepartmentElem).hide().appendTo("#departmentList").slideDown('slow'); 
     }, 
     error: function(){ 
      alert("failure"); 
     } 
    }); 
});

来源

2017-07-01 20:40:40

谢谢。这样可行。实际上，我首先确实喜欢这样做，但是当我将所有代码放入ajax请求中时，需要一点时间才能将div附加到dom中。我认为它必须等待服务器响应。我可以通过点击保存按钮在相同的时间吗？ –

是的，它必须等待直到服务器响应，你可以通过点击按钮时添加laoding图标，并在ajax susccess函数中删除它，为保存按钮做同样的事情，也可以添加laoding gif图像或这样的想法:) –

jQuery用ajax Post方法追加和删除元素

回答

相关问题