0

I have a javascript function already working that works so that when the user clicks a reviews link shown in a list of products it opens the products page and goes straight to the tabs section of the page, with reviews being the open tab.

The product listing page would have a url such as www.mysite/thisproduct#reviews The product page reviews section starts with

<li id="reviews">

The javascript i have is

$(window).load(function() {
if(window.location.hash && $(window.location.hash).length > 0) {
    selected_tab = $(window.location.hash);
    selected_tab_num = selected_tab.attr('class');
    selected_tab_link = $('a', selected_tab)[0];
    expandcontent(selected_tab_num, selected_tab_link);
}
page_links = $('.review_page_links a');
if (page_links.length > 0) {
    var load_more_reviews = false;
    page_links.live('click', function(e){
        e.preventDefault();
        if (load_more_reviews) return false;
        review_page_url = $(this).attr('href');
        $('.reviews_content > div').css({'opacity':'0.5'});
        $.ajax({
            type: 'GET',
            url: review_page_url,
            cache: false,
            success: function(data){
                new_reviews = $('.reviews_content > div', data).hide();
                $('.reviews_content > div').fadeOut(100).remove();
                $('.reviews_content').append(new_reviews);
                $('.reviews_content > div').fadeIn(100);
            },
            complete: function(){
                load_more_reviews = false;
            }
        });
        load_more_reviews = true;
    });
}
});

I'm trying to get this same code to work on a same page situation where the url click #review and reviews tab are on the same page. I'm not at all good with javascript but i'm assuming that the problem is because the code was originally written for loading a new page whereas now it's a same page event.

I tried changing .load to .onclick as i thought maybe that would change how it was triggered but it didn't make any difference.

I'm looking for suggestions on how i can make this function work on a same page event rather than a new page load.

Steve Price
  • 600
  • 10
  • 28

1 Answers1

2

You are looking for the hashchange event.

$(window).on("hashchange", function () {
   // inspect the hash and do your stuff
});
gruntledcustomer
  • 253
  • 1
  • 5
  • check out these: http://jsfiddle.net/techsin/54r5mazm/2/ http://stackoverflow.com/questions/680785/on-window-location-hash-change – Muhammad Umer Aug 22 '14 at 00:22
  • That did the trick. Thanks very much. Another day where i've learned something new. Kudos to you gruntledcustomer. – Steve Price Aug 22 '14 at 00:37