appending something to the URL in the web browser when loading dynamic content with jQuery

I'm loading some dynamic content into a window with jQuery.

I would like the address in the browser to appear like it has loaded a new page ie

We are looking at:

url.com/articles

and we click an article so the address now looks like:

url.com/articles/something

I'm achieving close to this with:

  location.hash = '/'+article_url;

But I end up with something more like:

url.com/articles#/something

Is there a way to append something to the location without using the 'ol hash tag?

Secondly, once this hash is appended, it makes it possible to click back开发者_如何学运维 in the browser, without obviously attempting a page change - in other words, the newly loaded ajax content remains on screen while the url changes. I've seen a plugin for this, but I figure before installing a whole new script I would search here.

Any ideas?

---

So, as you learned from Nick Craver's helpful comment, what you're looking for ("a way to append something to the location without using the 'ol hash tag") is not possible in most browsers. So let's talk about hashtags.

Let's look at a few approaches:

• Facebook has a solution that's kind of wierd, IMO. If you visit a Facebook URL, e.g. from bookmarks, like http://www.facebook.com/domenicdenicola, it acts like a "normal" webpage.

  The crazy stuff happens when you click somewhere else within that page. E.g., if you click on my "Info" tab, you get http://www.facebook.com/domenicdenicola#!/domenicdenicola?v=info. So you see that Facebook is basically taking the URL you entered the site on, then appending `#!`, then appending the URI of the page you are currently on. And this hashed portion will change if you e.g. click on "Photos". Weird right?

  It gets even better. Some pages, for whatever reason, cannot be loaded with hashes. So if you click on "Links", you get http://www.facebook.com/domenicdenicola?v=app_2309869772, a "normal" URL, with the hash disappearing. Now this is the "base" to which hashes get appended: so if I click over on info again, I get http://www.facebook.com/domenicdenicola?v=app_2309869772#!/domenicdenicola?v=info.

• Twitter is a bit more sensible. If you go to http://twitter.com/domenicdenicola, and you're logged in, you immediately get redirected to http://twitter.com/#!/domenicdenicola, a "hashed version" of the original URL. From there, all navigation proceeds via the hash, with normal-looking URLs loading, just with the extra `#!/` prefix.

  Sometimes it will kick you back to a normal URL, for things that cannot be loaded with hashes, just like Facebook; an example that I can find is that if you press "Settings" on the upper-right dropdown menu, you get http://twitter.com/settings/account. But then if you go back anywhere else, it's business as usual.

  Now, note that something interesting happens if you're logged out of Twitter: none of the links are hashes! And if you copy-and-paste http://twitter.com/#!/domenicdenicola into your address bar, you get redirected to the non-hashed http://twitter.com/domenicdenicola. This is great, because it means search engines see distinct pages, while users (with JavaScript enabled) get a smoother Ajaxy browsing experience.

• Finally, I have to mention GameGround, since I worked on that site for the last three months and implemented this feature for them. It's basically like Twitter, except we use only `#` as a prefix instead of `#!/`. We do the public URLs thing and everything. I guess one major difference is that we keep an outer "frame" (header + sidebar) the same, and use the URL to load different "content panes."

How to achieve this? We used the jQuery history plugin, initializing it with a function that would Ajax-load the content area of our pages. All our links were to normal URLs, but had class="LoadHashLink" on them. Then we would basically do this:

$(function ()
{
    $("a.LoadHashLink").click(function (e)
    {
        e.preventDefault();
        $.history.load($(this).attr("href"));
    });
});

There were some subtleties about making sure not to include that code on pages for logged-out users, implemented the redirect-to-hashed for logged-in users and the redirect-to-non-hash for logged-out users, and so on. But you can kind of imagine how that's done.

Hope this helps!

---

You should use Ben Alman's BBQ plugin. It's really easy to implement, and saves you a lot of time.