Member Avatar for tiekwebstar

i am facing another issue. i want to delete row via ajax and fadeout.

i have write below code. this is successfully deleted the row but do not fadeout.

var parent = $(this).parent().parent();
$.ajax({
                       type: "POST",
                       url: "delete_order.php",
                       data: "id="+id,
                       success: function(){
                       row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});


               }


     });
     return false;
  • 3 Contributors
  • 2 Replies
  • 942 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Short diagnosis: the most likely problems are a variable/scope mismatch and removing the row from inside each cell's animation callback. declares parent but later your success code references row, and calling remove() from every td callback will detach the tr on the first callback so the rest of the fades behave oddly. is right that targeting the whole row is simpler; 's request for the handler/markup is also on point because selection context matters.

A robust pattern that avoids those pitfalls is:

  • store the clicked element and its containing tr before the Ajax call;
  • make the Ajax request;
  • run the fade animation on the row or on its child cells and remove the row only once (use .promise().done() to wait for all cell animations).

Example (different approach than earlier posts):

var $btn = $(this);
var $tr  = $btn.closest('tr');

$.post('delete_order.php', { id: id })
  .done(function(){
    $tr.children('td').fadeTo(600, 0).promise().done(function(){
      $tr.remove();
    });
  })
  .fail(function(){
    console.error('delete failed');
  });

Extra tips: use closest('tr') instead of parent().parent() for resilience; save $(this) into a variable before the async call; prefer .done/.fail for clearer flow; avoid slideUp on tr (it can misbehave—wrap cell contents if you need height animation). This resolves the common causes that stop visible fading while still removing the row cleanly.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

I think we may need a bit more information about your code. Do you have this online where we can take a look at the source?

Member Avatar for AleMonteiro

Assuming that row is actually an TR object, try this:

$.ajax({
    type: "POST",
    url: "delete_order.php",
    data: "id="+id,
    success: function(){
        row.fadeOut(1000, function(){ 
            row.remove();
        });
    }
});

And please, ident your code before posting. It helps us to help you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.