CODEWITHSUNDEEP
javascriptjqueryhtmlurlhash
Rajasekar
Rajasekar

Reputation: 18978

Force reload when url hash changes

In my application there is a header menu. We have 5 menu items with same page url with different hash values such as

  1. Home (www.sample.com)
  2. Brand page 1(www.sample.com/test.html#brand1)
  3. Brand page 2(www.sample.com/test.html#brand2)
  4. Brand page 3(www.sample.com/test.html#brand3)
  5. Brand page 4(www.sample.com/test.html#brand4)

All the brand pages will be navigated to the same page (test.html) but with different hash.

Problem: when I click any of the links of brand page from HOME, the page automatically navigates to test.html and check for hash tag and loads item through ajax automatically.

But when I click any of the brand page links inside the brand page, the page is not refreshing.

Upvotes: 3

Views: 2227

Answers (1)

dm4web
dm4web

Reputation: 4652

HTML:

<div id="menu">
    <a href="#1">brand 1</a>
    <a href="#2">brand 2</a>
</div>

JQ:

$(function() {

    $('#menu a').click(function(e){
        var url=$(this).attr('href');

        window.location.href=url;// ## change url with hash
        location.reload();       // ## reload page

        e.preventDefault();      // ## prevent default click action 
    })

})

Upvotes: 5

Related Questions