Question

I have a table where each row has a button for deletion. Actually I delete the row everytime without checking if the ajax call was successfull. How can I achieve that, so that the row will only be deleted if the ajax call was ok.

Here is my clickhandler on each row

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

And here my ajax call

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

Call it in the success callback function of your Ajax request

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

EDIT

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

Also {id: sendallproperty} is a jQuery Object ..

If you want to pass the id … You need to do this

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