CODEWITHSUNDEEP
javascriptjquery
JHarley1
JHarley1

Reputation: 2112

Another Easy jQuery 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;
            });
        });

Upvotes: 1

Views: 85

Answers (7)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385405

$(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`
});

Upvotes: 1

Chris Dixon
Chris Dixon

Reputation: 9167

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

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

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);
    //...
  });
}

Upvotes: 1

pyvi
pyvi

Reputation: 675

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.

Upvotes: 0

nfechner
nfechner

Reputation: 17545

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.

Upvotes: 1

Groovetrain
Groovetrain

Reputation: 3325

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.

Upvotes: 3

andypaxo
andypaxo

Reputation: 6641

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

Upvotes: 0

Related Questions