jQuery if url hash, click event/activate javascript

Question

So from the home page, i have a link that goes to a products listing page. The product page has expand/collapse divs.

I need the appropriate div to expand depending on what the url# is.

So the link on the homepage is

<a href="/out-products.php#healthysnacks">healthy snacks</a>

when i click the link above, i am trying to activate this, on the product page:

<a href="javascript:ReverseDisplay('products4')" id="healthysnacks"> Healthy Snacks</a>

I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js. Please any insight would help.

thanks

nbrooks · Accepted Answer · 2012-08-10 06:44:06Z

7

You can make the following changes in the document ready function of your product page:

Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.

if ( window.location.hash ) {
    $(window.location.hash).click(); //clicks on element specified by hash
}

Better: In addition to the above, take the js out of your markup.

$('#healthysnacks').click(function(e) {
    e.preventDefault();
    ReverseDisplay('products4');
});

Then, after doing this, use the $(window.location.hash).click() code from above. Also, change your link to:

<a href="#" id="healthysnacks"> Healthy Snacks</a>

edited Aug 10, 2012 at 6:44

answered Aug 10, 2012 at 5:00

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

nbrooks Over a year ago

@raminson window.location.hash gives a string, in this case containing '#healthysnacks' so it works as an id selector. I probably should clarify that in the post though, thanks

Ram Over a year ago

Yes, you are correct, i had forgotten that hash property returns the # sign too.

nbrooks Over a year ago

@alex Have you included jQuery in the page? <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Alex Anonymous Over a year ago

its an older site, i have 1.5.1, let me upgrade :)

Alex Anonymous Over a year ago

the first banner on the accordion, click the text, it links to what i'm needing

|

Ram · Accepted Answer · 2012-08-10 05:12:50Z

3

You can use the hash property of the Location object, try the following:

$(document).ready(function(){
   var id = window.location.hash;
   $(id).trigger('click')
})

As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:

$('#healthysnacks').click(function() {
   // do something here
})

edited Aug 10, 2012 at 5:12

answered Aug 10, 2012 at 4:59

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

cukabeka Over a year ago

nice solution, works perfect for my setup. Are there any probable security flaws associated with this? somewhere else I saw some regex sanitization for this kind of has usage..

Ram · Accepted Answer · 2012-10-18 22:01:40Z

3

The answers suggested here are valid, but...

Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.

For example

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.

answered Oct 18, 2012 at 22:01

Ram

4334 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery if url hash, click event/activate javascript

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related