Jquery - can't target the right element with $(this)

Question

Possible Duplicate:
$(this) doesn't work in a function

Im having a problem targeting the right element in my code. I have a list of thumbnails on my page, and when you click on a "I dislike this" icon the targeted video change for another one.

Here's the HTML

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
       <div>
          <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
       </div>
   </div>
   <a href="...">
   <h1>...</h1>
   <div class="information">...</div>
</li>

Ajax is:

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

What Iam doing wrong? even $(this).css("border","1px solid red") is not "working". (I tried with background color, and color too) I dont see anything.

$(This) refers to the "a" tag where the function is called right? So im searching for his parent named videobox... Help?

So can I target

Answer 1

You should not use onclick, you should bind it to an event, especially as you could easily make this degrade well if the user does not have ajax.

Change your <a> tags to this:

<a href="/change/videos/1/thumbsdown/"
    data-sort="sort"
    data-page="page"
    class="dislike_black"
    title="I dislike this"></a>

jQuery event:

$('.dislike_black').click(function(e) {
    e.preventDefault(); // Prevent link from clicking

    var $aTag = $(this); // I use $aTag to denote a jq object

    $.ajax({
        url: $aTag.attr('href'),
        type: "POST",
        data: {
            "sort": $aTag.data('sort'), // data-sort attr value
            "page": $aTag.data('page') // data-page attr value
        },
        success: function(response) {
            $aTag.closest(".videoBox").html(response);
        }
    });
});

Now it works without javascript, and you're not using nasty onclick! Untested/no warranty.

Answer 2

Almost. In order to make this work, you need to pass in the context to the .ajax() call.

Like

$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST", 
    context: document.body, // for instance
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

The above code would cause that all ajax handlers will have this pointing to document.body. So you would need to replace the document.body with the element you are looking for. So, if you for instance call your function in some kind of a click handler you could just call context: this and the magic is done.

See jQuery Ajax Doc section "context" for more details.

Answer 3

I believe all you needed to change in your original code was to get the reference to this outside of the success function, like this:

function ThumbsDown(id,sort,page) {
    var self = this
    $.ajax({
        url: "/change/videos/"+id+"/thumbsdown/",
        type: "POST",
        data: {
            "sort": sort?sort:"",
            "page": page?page:""
        },
        success: function(data) {
            //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
            $(self).parent("li.videoBox").html(data); // Cant get this to work!
        }
    });