CODEWITHSUNDEEP
phpjavascripthtml
leonsas
leonsas

Reputation: 4898

Updating URL without apparent reloading

I´m building a webpage that has a sort of catalog in it, which shows the current item and its description, and thumbnails for other items below it, if I click on a thumbnail of a different item, I have some script to change the description and the big image to the desired item. The problem is that I want this to reflect in the URL so the user could send the URL as a link to other to show the desired item. But I havent found a way to change the URL without having to reload the page, and for aesthethics, I dont want to reload the page. Any ideas how to do this?

Upvotes: 2

Views: 479

Answers (3)

DaveRandom
DaveRandom

Reputation: 88647

There is no reliable (cross browser) way to change the URL in the address bar without reloading the page - the very act of changing window.location.href (which I imagine is what your trying to do) tells the browser to reload the page (even window.location.href = window.location.href; will do it in some browsers).

I think you would have to put a [link to this page] element on the page and change that instead - you can easily populate it with the current URL either at the server side or using a window.onload function and manipulate it in the same way as you have been doing using element.value or element.innerHTML (depending on what type of element you choose to contain the link).

You can do it with hashes (see the window.location.hash property) but this can be messy programmatically.

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074258

The usual, currently-broadly-compatible way is to use a hash, e.g.:

http://myniftystore.com/catalog#11321R-red-shirt

then

http://myniftystore.com/catalog#11321B-blue-shirt

then

http://myniftystore.com/catalog#95748B-blue-slacks

...as you navigate items. You can change the hash on the page by assigning to the location.hash property, without reloading. This requires that you use some client-side script in the first place to figure out what to show when the user first goes to the URL (by examining the location.hash).

Google has a proposal out for how to make these things crawlable. Personally, I think they've really messed it up by requiring that weird hashtag (#!xyz rather than just #xyz), but if it's me or Google, I think I know who'll win. :-)

Coming down the pike there's the whole history API, but support isn't very thick on the ground yet (particularly not — cough — from certain vendors).

Upvotes: 1

laurent
laurent

Reputation: 90776

The solution is to use location.hash. Also, to implement it correctly, you might want to read this article from Google: Making AJAX Applications Crawlable

Upvotes: 5

Related Questions