0

I'm banging my head here trying to figure out why this isn't working, so I finally created a simplified version of what I'm going on jsFiddle, and of course it works there.

What I'm doing - a simple AJAX call on hover over an element, and putting that response in a DIV. Here's the code on my site that is NOT working...

HTML

<div class="profileimage">
   <a href="#">
      <img src="/profilepics/img.jpg" />
      <p>Test Here</p>
   </a>
   <div class="profileInfo"></div>
</div>

jQuery

$(document).ready(function() {
    $('.profileimage').hover(function() {
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                $(this).find('.profileInfo').html(HTML);
            }
        });
    });
});

Also, for reference, all that's in getProfile.php currently is:

<p>RESULTS FROM AJAX</p>

What DOES work is that the AJAX request happens, the result is returned okay. If I replace the line in the success function with alert(HTML), I can see the response. What does NOT work is that the response never makes it in to the profileInfo child element.

I assumed my locator was incorrect, so I created a jsFiddle (HERE) to test. Turns out, the locator works just fine.

So I guess my question here is... if the locator works okay in the jsFiddle, but not in the AJAX request... is there something about the way it's used in an AJAX call that I need to change? I don't see why $(this).find('.profileInfo').html(HTML); shouldn't work just fine regardless of whether I'm using it in an AJAX response or not.

Any thoughts / suggestions are appreciated...

Charlie74
  • 2,883
  • 15
  • 23
  • In your ajax success function(), put this: `console.log($(this));` and you shall see where you're going wrong. – Jared Gotte Nov 06 '13 at 19:57
  • figure out exactly where it is failing. So far it seems like you're saying `$(this).find('.profileInfo').html(HTML);` doesn't work, and it shouldn't because `this` isn't a dom node and doesn't have children. – Kevin B Nov 06 '13 at 19:57
  • `shouldn't work just fine regardless of whether I'm using it in an AJAX response or not.` as long as `this` is referencing the same thing, you are correct. – Kevin B Nov 06 '13 at 19:59
  • I updated your fiddle to recreate the issue you are seeing: http://jsfiddle.net/Tentonaxe/QeXQ2/1/ – Kevin B Nov 06 '13 at 20:00

2 Answers2

3

The this is not the right context. To fix this you have multiple options:

  • You can use context option:

    $.ajax({
    url:"getProfile.php",
    context: this,
    success:function(HTML){
        $(this).find('.profileInfo').html(HTML);
    }
});

  • or you could use a different selector:

    $.ajax({
    url:"getProfile.php",
    success:function(HTML){
        $('.profileimage').find('.profileInfo').html(HTML);
    }
});

  • or you could use jQuery's bind to ensure the correct context:

    $.ajax({
    url:"getProfile.php",
    success: $.proxy(function(HTML){
        $(this).find('.profileInfo').html(HTML);
    }, this)
});

  • or you can use closure like this (my favorite):

    var self = this;
$.ajax({
    url:"getProfile.php",
    success: function(HTML){
        $(self).find('.profileInfo').html(HTML);
    }
});
R. Oosterholt
  • 7,720
  • 2
  • 53
  • 77
  • Interesting... so it would seem that the missing piece in my code is specifying the `context` in the AJAX function. Thanks... I wasn't aware of that attribute. – Charlie74 Nov 06 '13 at 20:07
  • And reading the final example using `closure`, this also seems to be a good (and readable) approach. – Charlie74 Nov 06 '13 at 20:13
1

Try this less elegant but educational approach...

$(document).ready(function() {
    $('.profileimage').hover(function() {
        var that = $(this);
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                that.find('.profileInfo').html(HTML);
            }
        });
    });
});
Jared Gotte
  • 452
  • 3
  • 13
  • Definitely educational... after reading this, it makes sense that the AJAX call itself probably has its own `this`, so you need to capture the expected `this` before the call is made. – Charlie74 Nov 06 '13 at 20:15