Another Easy jQuery Question

Question

I have the bellow code, I wish to create an IF statement so the loadScript function is only called for a specific HREF. But when I try and alert the value of the href it returns "Undefined"...

Many Thanks, J

$(document).ready(function()
        {
            $('.jNav').click(function()
            {
                $('#sandbox').load($(this).attr('href'),function() 
                {
                    alert("From here " + $(this).attr('href') + " to here.");
                    loadScript();
                });
                return false;
            });
        });

Answer 1

Your issue is just scoping. In your load() callback, this refers to the element you're calling load() on, which happens to be $('#sandbox') , and thus: no href. Usually what I do is something like this:

$('.jNav').click(function()
{
  var self = this;
  $('#sandbox').load($(this).attr('href'),function() 
  {
    // Notice the use of self here, as we declared above
    alert("From here " + $(self).attr('href') + " to here.");
    loadScript();
  });
  return false;
});

Doing this ensures that you can still get to the thing that you clicked from inside the load() callback.

Answer 2

The problem is one of context: The call to $(this) in the alert refers to $('#sandbox') not $('.jNav') . Simply define a variable for you first reference.

Answer 3

When you are inside the callback for $('#sandbox').load , this refers to $('#sandbox') , and not to $('.jNav') . If you want to alert the href, save that (or a reference to this ) in a variable.

$('.jNav').click(function(){
  var that = this;
  $('#sandbox').load($(this).attr('href'),function(){
    alert($(that).attr('href'));
    //...
  });
}

OR

$('.jNav').click(function(){
  var href = $(this).attr('href');
  $('#sandbox').load($(this).attr('href'),function(){
    alert(href);
    //...
  });
}

Answer 4

$(this) was the .jNav , but in your callback it's now the #sandbox . Pre-cache the variable at the point where it's presented to you, then use it wherever you like.

Improving slightly on Groovetrain's answer, I'd write:

$('.jNav').click(function(event) {
  var $self = $(this);
  var href  = $self.attr('href');

  $('#sandbox').load(href, function() {
    alert("From here " + href + " to here.");
    loadScript();
  });

  event.preventDefault(); // better than `return false`
});

Answer 5

Inside your innnermost function the context ( this ) is set to the #sandbox element. You'll want to get the href attribute from the .jNav element beforehand and store it in a variable.

Example code

Answer 6

Take care of what "this" is in what part of your function. In the innermost function, you are calling it from $('#sandbox') ,which I suspect doesn't have a href attribute. the best solution would probably be to pass the value of the href into the function or store it in a variable.

Answer 7

$(document).ready(function()
        {
            $('.jNav').click(function()
            {
                $('#sandbox').load($(this).attr('href'),function() 
                {
                    alert("From here " + $(this).parent().attr('href') + " to here.");
                    loadScript();
                });
                return false;
            });
        });