CODEWITHSUNDEEP
javascriptwindow.location
EmmyS
EmmyS

Reputation: 12138

location.hash issue in js

I have a piece of javascript that I inherited; it's being used as a tab switcher. Unfortunately it's not working. Here's the code:

$(document).ready(function(){

    /* This is the back button friendly tab switcher */
    var trackContainers = $('.switcher > .results');
  trackContainers.hide().filter(':first').show();

  $(window).bind('hashchange', function () {
    var hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

    trackContainers.hide();
    trackContainers.filter(hash).show();
    $('ul.tabs li').removeClass('active');
    $('a[hash='+hash+']').parent().addClass('active');
  });

  $(window).trigger("hashchange").location(hash);

});

What's supposed to happen is when a specific tab is clicked, it changes the class of the li tag surrounding the clicked tab. Here's what the tab code looks like:

<div class="switcher"> 
<ul class="tabs"> 
<li  class="inactive"><a href="#dpp">Digital Path to Purchase</a></li> 
<li class="inactive"><a href="#cre">Fueling Creativity</a></li> 
<li class="inactive"><a href="#bpp">Best Practices/Big Picture</a></li> 
<li class="inactive"><a href="#si">Shopper Insights 101</a></li> 
<li class="inactive"><a href="#dem">Who Is Your Shopper</a></li> 
<li class="inactive"><a href="#gt">Google Theater</a></li> 
<li class="inactive"><a href="#res">Understanding the Shopper</a></li> 
<li class="inactive"><a href="#bar">Brand Activation at Retail</a></li> 
<li class="active"><a href="#duc">Deeper Understanding of Center Store</a></li> 
</ul> 
</div> 
</div>

You can see that the link called #duc has the active class on its li item. However, when I look at the script code in Firebug, it gives me an error saying hash is not defined:

enter image description here

Again, looking in Firebug, but this time at the console tab, it very clearly shows that hash IS defined:

enter image description here

Can anyone point out how it's losing its definition between the console.log and the .trigger lines?

Upvotes: 1

Views: 1817

Answers (4)

Kristian
Kristian

Reputation: 21800

$(document).ready(function(){

/*I moved it out of the function because the var was only in existence in the bind function before. Now its going to exist still when you call it at $(window)*/
var hash = window.location.hash || '#dpp';   


 /* This is the back button friendly tab switcher */
    var trackContainers = $('.switcher > .results');
  trackContainers.hide().filter(':first').show();

  $(window).bind('hashchange', function () {

    //here, i'm simply changing its value, which was set on line 4 outside of the fn.
    hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

    trackContainers.hide();
    trackContainers.filter(hash).show();
    $('ul.tabs li').removeClass('active');
    $('a[hash='+hash+']').parent().addClass('active');
  });

  $(window).trigger("hashchange").location(hash);

});

Upvotes: 0

nwellcome
nwellcome

Reputation: 2299

you want

$(window).trigger("hashchange").location(window.location.hash);

As Anthony Grist said, the variable hash you defined in the anonymous function doesn't exist by the time you get there.

Upvotes: 1

John David Five
John David Five

Reputation: 831

It looks as though you are defining hash within the scope of your bind function :

$(window).bind('hashchange', function () {
    var hash = window.location.hash || '#dpp';

It therefore does not exist outside of that function. If you wanted access to that variable based off the value the window.location.hash was at the time of your hashchange event, I would create a variable outside of the bind 'hashchange' function so it has access to that variable.

var hash;

$(window).bind('hashchange', function () {
    hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

     trackContainers.hide();
     trackContainers.filter(hash).show();
     $('ul.tabs li').removeClass('active');
     $('a[hash='+hash+']').parent().addClass('active');
});
$(window).trigger("hashchange").location(hash);

But the value of hash at the $(window).trigger("hashchange") line will not be set more than likely because that event may not have fired and the 

hash = window.location.hash || '#dpp';

line will not have been run. I think you need to examine the workflow a little closer.

Upvotes: 3

Anthony Grist
Anthony Grist

Reputation: 38345

The scope of the hash variable is only the anonymous function being called in the .bind() section of the code, so doesn't exist once that function has finished executing.

Upvotes: 1

Related Questions