Скрытие DIV после AJAX успеха

Question

Im используя следующую AJAX вызов, чтобы обновить запись в моей таблице:

$(function() { 
    $(".decline").click(function(){ 
     var element = $(this); 
     var del_id = element.attr("id1"); 
     var order_id = element.attr("data-order1"); 
     $.ajax({ 
      type: "POST", 
      url: "decline.php", 
      data: {id1:del_id,order_id1:order_id}, 
      success: function(){cache: false} 
     }); 
     $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow") 
      .animate({ opacity: "hide" }, "slow"); 
    }); 
}); 

Он оживляет DIV при необходимости, когда цзы нажмите на классе селектора .decline здесь:

<div class="<?php echo ($accept == '1')?'showop':'show';?>"> 
<span class="growthcust">$<?php echo number_format($growth); ?></span> 
<span class="accepted"><a href="#" class="accept" id="<?php echo $id1; ?>" data-order="<?php echo $name; ?>"><input type="button" title="accept" value="Accept" /></a></span> 
<span><a href="#" class="decline" id1="<?php echo $id1; ?>" data-order1="<?php echo $name; ?>"><input type="button" title="declined" value="Decline" /></a></span> 
</div> 

, но Id хотел бы переместить функцию на мой вызов AJAX, чтобы div скрывался после успешного вызова AJAX.

Как я могу изменить его, чтобы оживить успех?

Answer 1

Запустить скрытый код в обратном вызове success. Вы можете получить доступ к текущему элементу, используя переменную element, которую вы привязали.

$(function() { 
    $(".decline").click(function(){ 
     var element = $(this); 
     var del_id = element.attr("id1"); 
     var order_id = element.attr("data-order1"); 
     $.ajax({ 
      type: "POST", 
      url: "decline.php", 
      data: {id1:del_id,order_id1:order_id}, 
      // cache: false, // Not needed for POST, they're never cached 
      success: function(){ 
       element.parents(".show").animate({ backgroundColor: "#003" }, "slow") 
        .animate({ opacity: "hide" }, "slow"); 
      } 
     }); 
    }); 
});