Onclick change url using jquery

Question

I am trying to change a url using jquery.

So once the button is clicked it will change the parent url but it will not redirect.

For example, If the url is,

http://www.xyz.com then it will become http://www.xyz.com/abc but will not be redirected.

My Code:

$('.clickme').click(function () {
    window.location.hash = 'xyz';
});

Is it at all possible?

Please suggest.

JSfiddle : http://jsfiddle.net/squidraj/Tn8BW/3/

Yes it is possible. Show us your code so far and we will see where you went wrong. Also do you mean the URL on the anchor tag or the URL in the address bar? — Huangism, Dec 09 '13 at 16:26
http://stackoverflow.com/questions/352343/is-there-a-way-to-change-the-browsers-address-bar-without-refreshing-the-page — GTSouza, Dec 09 '13 at 16:26
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history?redirectlocale=en-US&redirectslug=Web%2FGuide%2FDOM%2FManipulating_the_browser_history — Quentin, Dec 09 '13 at 16:34

score 27 · Accepted Answer · answered Dec 09 '13 at 16:38

27

Javascript can luckilly modify browser's history, and change the url. This example will add new row to your browser's history, and you are able to use back button to go to that page.

HTML:

<a href="http://www.xyz.com/abc" id="link">abc</a>

jQuery:

$('#link').click(function() {
   window.history.pushState('obj', 'newtitle', '/abc');
   return false;
});

Or if you want to use url hashes(like in your code):

$('#link').click(function () {
    window.location.hash = 'xyz';
    return false;
});

That will not redirect, it stays on the page.

answered Dec 09 '13 at 16:38

aksu

5,221
5
24
39

Thanks @aksu. In first example is it supported by all browsers/versions? – Prithviraj Mitra Dec 09 '13 at 16:48
It's supported pretty generally, even in some of the mobile browsers! you can check more on http://caniuse.com/#feat=history. – aksu Dec 09 '13 at 16:53
Search engines ingnore hashtags, so they will not indexed. You can read more on that blog http://www.phoenixrealm.com/the-power-of-the-hash-in-seo/ – aksu Dec 09 '13 at 17:26
Thanks @aksu. One last question. Is there any way to remove the added hashtag then. – Prithviraj Mitra Dec 09 '13 at 17:39
Well you can use my first example. That doesn't create hashtags. – aksu Dec 09 '13 at 18:55
4

I would downvote, but my reputation is to low... never ever use "return false" for this.What you want to do is "event.preventDefault()"! – Dunstkreis Jul 04 '14 at 11:32
I am curious myself too. Is there any reason why you used `return false` instead of `event.preventDefault()`? – Daniel Nov 11 '14 at 04:57
1

It's easier to remember. – aksu Nov 12 '14 at 15:58
Perfect! Just what I needed. – Nima Mar 08 '15 at 01:17

score 3 · Answer 2 · answered Dec 09 '13 at 16:35

3

instead of window.location you need to modify the history

example code

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

answered Dec 09 '13 at 16:35

marvwhere

561
3
11

Onclick change url using jquery

2 Answers2

Linked