Rules For Using Relative URLs in Javascript

MinnRick
MinnRick used Ask the Experts™
on
Hello Experts -
Can someone please give me the quick and dirty on properly structuring relative URLs in javascript, particularly when multiple levels up and/or down the tree are required?  Say, for instance, that in a development environment I'm starting at a file such as this:   \wwwroot\alpha\bravo\charlie.aspx

How would a javascript reference need to be structured that would navigate from that page to get to something like this:   \wwwroot\delta\echo\foxtrot\golf.aspx

Or, from charlie.aspx to this:   \wwwroot\alpha\hotel\india\juliet\kilo.aspx

Are there shortcuts that allow you to go up only one level or two and then down into another branch of the file tree from there (and is it good form to do so), or is it best to go all the way to the root directory and then down from there?  Are there shortcut symbols involved to go up one level and all the way to the root?  I'm sure that this is basic stuff but I've never been able to get my head fully around how it works and what constitutes a best practice.  Thanks in advance.

-- Rick
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
there are three types of urls:

- relative
- server (or site or root) relative
- absolute

pretty good write up here:

http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c42a.html
Fixer of Problems
Most Valuable Expert 2014
Commented:
That's a good article.  It's taken me a long time to get a grasp on this myself.

Javascript in your browser knows nothing about the structure on the server above the 'web root', the highest public page in the web site, the one you get at http://www.mysite.com/ .

if '\wwwroot\' is your 'web root', then for javascript, 'charlie.aspx' is at http://www.mysite.com/alpha/bravo/charlie.aspx .  Note the change from'\' to '/' in the address.  If 'tango.apsx' is in that same directory, then you can use a 'relative' link to go there which is just the file/page name 'tango.apsx' .  

'golf.aspx' is going to be at http://www.mysite.com/delta/echo/foxtrot/golf.aspx .  To get there from charlie.aspx, you can use the full (absolute) URL or you can use 'site relative' which would be '/delta/echo/foxtrot/golf.aspx' .  The starting slash means start at the 'web root'.  And because 'charlie.aspx' and 'golf.aspx' are not on the same path from the web root, those are your only two choices.

If 'golf.aspx' was in the directory path above 'charlie.aspx' , you could use '../golf.aspx' because the two dots means go up one level in the directory structure.

You could work out more complicated paths and links but for my own sites, I refuse to make them that complicated.  Also, these rules are not just for javascript but apply to any link in a page in your browser.

Use "/" rather than "\";
"./" is the current directory;
"../" is the parent directory;
"/subdir" is a sub-directory.

So the following matches your example:
$("#golf").prop({
                href: "./../../delta/echo/foxtrot/golf.aspx"
            });

$("#kilo").prop({
                href: "./hotel/india/juliet/kilo.aspx"
            });

Author

Commented:
Thanks all - very helpful.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial