jquery - 仅当 AJAX 调用和数据库删除成功时，如何删除视图中的一行？

Question

我有一个表格，其中每一行都有一个删除按钮。实际上我每次都删除该行而不检查ajax调用是否成功。我怎样才能做到这一点，以便只有在 ajax 调用正常时才会删除该行。

这是我在每一行的点击处理程序

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');  // This will give the closest tr
                            // If the class element is the child of tr          
    deleteRowFromDB(oTable, closestTr);
    $closestTr.remove() ;  // Will delete that
 });

在这里我的ajax调用

function deleteRowFromDB(oTable, sendallproperty){

        var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
        console.log("route is: " + deleteEntryRoute.url)
        $.ajax({
           url: deleteEntryRoute.url({id: sendallproperty}),
           type: deleteEntryRoute.method,
           data: 'id=' + sendallproperty
        });

Answer 1

在您的 Ajax 请求的成功回调函数中调用它

$.ajax({
         url: deleteEntryRoute.url({id: sendallproperty}),
         type: deleteEntryRoute.method,
         data: 'id=' + sendallproperty.
         success : function() {
             // Your code here
        }
     });

编辑

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');     
    deleteRowFromDB(oTable, $closestTr);
});

function deleteRowFromDB(oTable, sendallproperty){

   var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
   console.log("route is: " + deleteEntryRoute.url)
   $.ajax({
           url: deleteEntryRoute.url({id: sendallproperty}),
           type: deleteEntryRoute.method,
           data: 'id=' + sendallproperty,
           success : function() {
             sendallProperty.remove();
           }
   });
};

也是{id: sendallproperty} 一个 jQuery 对象 ..

如果你想传递 id ... 你需要这样做

{id: sendallproperty.attr('id')}

Answer 2

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');  // This will give the closest tr
                        // If the class element is the child of tr          
    if(true === deleteRowFromDB(oTable, closestTr)){
        //if true returned from the success in the ajax function, then we remove
        $closestTr.remove() ;  // Will delete that
    }

 });



function deleteRowFromDB(oTable, sendallproperty){

    var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
    console.log("route is: " + deleteEntryRoute.url)
    $.ajax({
       url: deleteEntryRoute.url({id: sendallproperty}),
       type: deleteEntryRoute.method,
       data: 'id=' + sendallproperty,
       success:function(data){
           return true;
       },
       error:function(){
           return false;
       }
    });
}