CODEWITHSUNDEEP
jqueryajax
DataGuy
DataGuy

Reputation: 1725

jQuery animation of parent div

I am using the following AJAX call to perform a function within my DB table and also hide the parent DIV (.show) of the '.decline' element that calls the function.

Here is my AJAX:

<script type="text/javascript">
$(function() {
$(".decline a").click(function(){
var element = $(this);
 $.ajax({
   type: "POST",
   url: "decline.php",
   success: handledata
});
  $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");

});
});
</script>

and here is where I call the AJAX (its in a dropdown that drops when a user hovers over 'Delete':

<div class="show"><!--opening row div-->
<span class="namecustcoltype">Groceries</span>
<span class="namecusttype">Milk</span>
<span><ul><li><span class="accept">Keep</span></li><!--dropdown span-->
<li>
Delete
<ul>
<li><a href="#" class="decline">This is where reason one will go</a></li>
<li><a href="#" class="declineOne">This is where reason two will go</a></li>
<li><a href="#" class="declineTwo">This is where reason three will go</a></li>
</ul>
</li>
</ul>
</span><!--dropdown span end-->
</div><!--closing row div-->

The process works if not called from the dropdown menu and when using the '.accept' element, but I need it to run after a user clicks on a choice within the dropdown menu.

Thanks!

Upvotes: 0

Views: 78

Answers (1)

Jai
Jai

Reputation: 74738

The issue i see is:

$(".decline a")

The above code tries to find an anchor in a element with className .decline which does not seem to be available in your markup and you are trying to access the id of it as id1 which is also not available there. The .decline class name is actually assigned to the anchor so the click would not work in this case.

You can try this code:

 $(function () {
     $("a.decline").click(function () {
         var element = $(this);
         var del_id = element.attr("id1"); // this is not available
         var order_id = element.attr("data-order1"); // this also not available
         $.ajax({
             type: "POST",
             url: "decline.php",
             data: {
                 id1: del_id,
                 order_id1: order_id
             },
             success: handledata
         });
         $(this).closest(".show").animate({
             backgroundColor: "#003"
         }, "slow").animate({
             opacity: "toggle"
         }, "slow");
     });
 });

$(this).closest(".show") would be a great way to traverse up to the element you want to target to hide it.

Note:

You are trying to animate background color which will only work if you add jQuery-ui library.

Upvotes: 1

Related Questions