Develop Reference

How to Replace the path name of URL using JavaScript/jQuery?

I am trying to replace the url and load the page.
Example:
URL: http://www.example.com/account/edit
I want to replace this as http://www.example.com/account/add. And load this page.
For that, I tried by using location.pathname.
location.pathname = "/account/add";
When using like above, the add page is displayed. But after that, URL http://www.example.com/account/add is loading. Then the add page is not displayed. I get that page is not found message.
The host name should vary based on running the project. So I want to resolve this without based on host name.
How can I achieve it?

If you want to retain the page in your session history (meaning you want to be able to use the back button to it) use the assign method. Otherwise, you replace.
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
http://mdn.beonex.com/en/DOM/window.location.html

window.location.href = "http://www.example.com/account/add";
OR
window.location.replace("http://www.example.com/account/add");
This will redirect to the new page.

Actually you can change your url some other ways like below:
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

Handling hash with HTML5 History API

I am using the history.js plugin here: https://github.com/browserstate/history.js/ for handling HTML5 History in my application. And I want to handle both HTML5 and HTML4 versions (using the hash fallback).
You can see the demo here: http://dev.driz.co.uk/history45/
Question 1
How do I load the correct content based on the hash when a person visits a url with a hash in (hasn't clicked a link on the website) As the server won't understand what the code is and I don't want to have to double the request by checking if the hash exists and then calling the content via AJAX. So for example: http://dev.driz.co.uk/history45/#about.php doesn't load in the about.php content.
Update:
I've seen some examples here: https://gist.github.com/balupton/858093 which seem to cover loading the correct content (even optimised versions). But I'm struggling to get it to work in combination with my HTML5 version. View source: http://dev.driz.co.uk/history45/ AND it only runs when a person clicks a link instead of on page load which is the original issue.
Update 2:
Tried an example here: http://dev.driz.co.uk/history4/#/contact.php to get the content to load in contact.php content using the snippet in the source but doesn't work...? BUT according to the article here: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling#wiki-why-the-hashbang-is-unnecessary this code SHOULD be AJAX loading in the correct content if it has a hash on it. Any ideas why?
Question 2
How do I force the /#/ on the root and prefix all urls with `#/'
As currently if you try and visit a page via a link in a HTML4 browser, you end up with weird urls like:
http://dev.driz.co.uk/history45/#contact.php and http://dev.driz.co.uk/history45/#./
instead of:
http://dev.driz.co.uk/history45/#/contact.php and http://dev.driz.co.uk/history45/#/
And if I start on an inner page with:
http://dev.driz.co.uk/history45/contact.php and choose a link then I end up with: http://dev.driz.co.uk/history45/contact.php#about.php when what it should be is: http://dev.driz.co.uk/history45/#/about.php

How do I load the correct content based on the hash when a person visits a url with a hash in (hasn't clicked a link on the website) As the server won't understand what the code is
The server won't see the # or anything after it
and I don't want to have to double the request by checking if the hash exists and then calling the content via AJAX.
Your only other option is to redirect (by setting location with JavaScript) to the URL that you would have used if the history API was available.
How do I force the /#/ on the root?
You'd have to redirect to the homepage (again by setting location) if the history API isn't supported.
I take the view that if they are using a browser which doesn't support the history API (which probably means Windows XP and IE 8 these days) then they can get the non-Ajax fallbacks and I never have to deal with the hash hack.

If all you want to do is to force all browsers (both HTML4/5) to use hashes, you'd use change the History.js Options within your init
History.options.html4Mode = true
However, you may also want to consider using the $.address functionality from jQuery which can append any new URL you want with a hash.
Also within the $.address method, you could also determine where to redirect the user based on their init URL if they were accessing the site for the first time:
Say, have a user access a URL with say
http://www.site.com/#/about.php
you could then have a function which listens to any changes to any changes based on the URL changes
$.address.change(fn)
REF: http://www.asual.com/jquery/address/docs/
UPDATE
One thing I've discovered that may apply here is that if you have a click event handler which behaves by pushing a new state, even if you are currently on that same page, History js will append the same url to the end of the existing URL with a hash
e.g.
If on About Page (and your state is "about") and you click the about link -
your URL will change from
http://www.site.com/about
to
http://www.site.com/about#/about
To save yourself the hassle, have an if statement on that button that checks your History State for "about" and if not, pushState "About"
e.g.
$('.about.btn').on('click', function(e){
if(History.getState().data.State != "About") {
e.preventDefault();
History.pushState({"State": "About"}, null, "/about");
}
})

Change URL Dynamically Without Adding Previous To History Stack

A stackoverflow question URL includes a servlet, id#, and title like so...
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
My webiste works the same way with URL's like so...
localhost:8443/user/1/admin
The query I do on the backend to get the users info only requires the id number. The name of the user after that is just for show. So if you typed this into the browser for localhost:8443/user/1/a it would give you the exact same page as this localhost:8443/user/1/admin
Stackoverflow is capable of noticing that the end part of the URL is missing and add it back. So if you put this into the address bar
stackoverflow.com/questions/824349/modify
They will change it to this dynamically
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
Now I did reading about changing URL's dynamically on stackoverflow and everyone kept referring to history.pushstate so I tried it. The problem with this is it adds the incorrect URL to the history stack. What I would like to accomplish is change the URL to the path it should be and not include the wrong URL to the history stack. So if the user decides to go back they go back to the actual page they were on last not, stackoverflow.com/questions/824349/modify. Just like stackoverflow does it. How could I do this!?

Check out the replaceState method.

Try using history.replaceState instead of history.pushState

ASP.Net page: Chrome adds a #b to the URL?

when I open the URL
http://mycomputer/web/Page.aspx?OfflineMode=false&ID=2
Chrome will make it look like:
http://mycomputer/web/Page.aspx?OfflineMode=false&ID=2#b
The problem is that I do javascript reloads via the URL with changed parameters and this is disturbing the process.
Any ideas?

Without seeing the page online to troubleshoot it, I would say save the url as a string and then modify the string. Then trying reloading based on the new string.
Is it always just #b added? And do you have an inner page links?

How can I reload the entire page when only the url hash changes?

How do I reload a page if the only change to the url is a hash? location.href doesn't work as I expect.
location.href= siteUrl + '#T_blockName';
This doesn't refresh the page unless I change siteUrl. How is it possible?

You need to use location.hash. This retrieves the hash. To change it, you need to use an anchor or set window.location to the location plus the hash you want.
Also, you are using PHP concatenation syntax when you should be using +.

Its possible because simply changing the hash part isn't going to request a page reload since hash is usually considered to be part of the page (anchor, id etc.).
You need to specifically request a page reload but how you are going to do it depends on what you are actually trying to achieve.

That is not how you concatenate strings in javascript, you need to use + instead of ..
location.href= CURRENT_SITE_URL + '#T_blockName';