Question

I am implementing a “Quick delete” function into a page I am creating. The way it works is like this:

1: You click the “delete” button in the table row for the record that you want to delete.

2: The page sends a request to the ajax page and return a successfully message of “yes” or a failure message of “no”.

My issue is that if I get a successful message of “yes” I want to hide the row for that record. I am having issue “finding” the row using JQuery.

Here is my jquery code:

$(document).ready(function(){

$(".pane .btn-delete").click(function(){

    var element = $(this);
    var del_id = element.attr("id");
    var dataString = 'action=del&cid=' + del_id;

    if(confirm("Are you sure you want to delete this content block?"))
        {
        $("#msgbox").addClass('ajaxmsg').text('Checking permissions....').fadeIn(1000);

         $.ajax({
           type: "get",
           url: "ajax/admArticles_ajax.php",
           data: dataString,
           success: function(data){
               switch(data)
                {
                    case "yes":
                        $("#msgbox").addClass('ajaxmsg').text('Deleting content block....').fadeIn(1000);

                        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
                        .animate({ opacity: "hide" }, "slow")

                    break
                    case "no":
                        $("#msgbox").removeClass().addClass('error').text('You do not have the correct permissions to delete this content....').fadeIn(1000);
                    break
                    default:
                    };
                }
         });

     }
    return false;
});

});

This is the lines of code I am using to hide the row however it is not working because I don’t think $(this).parents(“.pane”) finds the element.

$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
                        .animate({ opacity: "hide" }, "slow")

Any help would be greatly appreciated. Thanks…

Answer 1

In an Ajax callback, this does not reference your element that handled the event.

You have a reference to it already in your event handler called element, though. Just do:

element.parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
                    .animate({ opacity: "hide" }, "slow")