Tricky jQuery operation, not sure if I am using 'this' property either.

Question

Using jQuery, I am binding some image tags with a click event like this:

$('.imageClass > a > img').bind('click', onImageClick);

this.onImageClick = function() {
    $.post("/blah/123", { test : 'a' }, function(data) { myCallback(this, data); }, "json");
}

this.myCallback(event, data) {
    alert($(event).parent.attr("href"));
};

My DOM looks like this:

<div class="imageClass">
    <a href="#"><img src="/images/1.jpg" alt="1"></a> <strong>hello</strong>
    <a href="#"><img src="/images/2.jpg" alt="2"></a>
</div>

I want to alter the text 'hello' in mycallback somehow using data.Message

I can't seem to pin point the strong tag, and i'm not sure if I am passing the correct value into mycallback either!

Answer 1

To change the text in strong with data from the ajaxcall, try this:

$(".imageClass > a > img").click(on_image_click);

function on_image_click() {
    var image = this, strong = image.parent().next();
    $.getJSON("/blah/123", {test: 'a'}, function (data) {
        strong.text(data.Message);
    });
}

It seems like you are a little unsure how to use the this-operator, which is understandable. Once understood, it's a powerful concept. I've tried finding a good article on the net. Quirksmode has one, but it is slightly confused as well. I can however heartily recommend Douglas Crockfords Javascript: the good parts.