How to get relative path in Javascript?

Question

In my ASP.net web project, I've written the following Javascript code in a .js file:

function getDeviceTypes() {
    var deviceTypes;
    $.ajax({
        async: false,
        type: "POST",
        url: "Controls/ModelSelectorWebMethods.aspx/getDeviceTypes",
        data: '{ }',
        contentType: "application/json;",
        dataType: "json",
        success: function(response) {
            deviceTypes = response.d;
        },
        error: function(xhr, status) {
            debugger;
            alert('Error getting device types.');
        }
    });    // end - $.ajax
    return deviceTypes;
}

It was working great until I tried to load this .js file into a page in a subdirectory.

Let's suppose that the name of my project is widget.

When I use this code in the main virtual directory, Javascript interprets Controls/ModelSelectorWebMethods.aspx/getDeviceTypes to mean https://mysite.com/widget/Controls/ModelSelectorWebMethods.aspx/getDeviceTypes and all is well. However, from the page in a subdirectory, Javascript interprets it to mean https://mysite.com/widget/subdirectory/Controls/ModelSelectorWebMethods.aspx/getDeviceTypes and it doesn't work.

How can I write my Javascript code so that the AJAX web method can be called from pages in any directory in my application?

I suppose I could use absolute path, but then that would break my development server that doesn't use the virtual directory /widget... — Vivian River, Jun 10 '11 at 18:38
Please don't use `async: false`, your users will hate you for locking up their browsers. Specify a callback instead. The only resource I have off hand is http://stackoverflow.com/questions/2956261/got-stuck-in-the-asynchronous-nature-of-ajax-requests/2956302#2956302, but a quick Google for AJAX callback will help you loads. — Matt, Jun 10 '11 at 19:13

score 17 · Accepted Answer · answered Jun 10 '11 at 19:08

You've got two options:

Build a configuration/ preferences object in JavaScript which contains all your environment specific settings:
```
 var config = {
     base: <% /* however the hell you output stuff in ASPX */ %>,
     someOtherPref: 4
 };
```
and then prefix the AJAX url with config.base (and change the value for config.base whether you're on a dev/ testing/ deployment server.)
Use the <base /> HTML tag to set the URL prefix for all relative URL's. This affects all relative URL's: image's, links etc.

Personally, I'd go for option 1. You'll most likely find that config object coming in handy elsewhere.

Obviously the config object will have to be included in a part of your site where server-side-code is evaluated; a .js file won't cut it without configuring your server. I always include the config object in the HTML <head>; its a small config object, whose contents can change on each page, so it's perfectly warrented to stick it in there.

Option 1 does not work here because this code is in an external JS file — Vivian River, Jun 10 '11 at 19:46
@Rice: Option 1 is still valid. Read the last part of my answer. This snippet does not have to be included in the same script file as your AJAX code. All JS code is evaluated in the same global scope regardless where it is defined. — Matt, Jun 10 '11 at 19:58

Jamie Treworgy · Answer 2 · 2011-06-10T19:40:32.220

As long as you don't care about asp.net virtual directories (which makes it actually impossible to figure out from script, you'll have to pass something from the server) you can look at the URL and parse it:

function baseUrl() {
   var href = window.location.href.split('/');
   return href[0]+'//'+href[2]+'/';
}

then:

...
   url: baseUrl()+"Controls/ModelSelectorWebMethods.aspx/getDeviceTypes",
...

... and now I see from your comments above that virtual directories are a problem. I usually do this.

1) In your masterpage, put code to inject a script somewhere, preferably before anything else (I add it directly to HEAD by adding controls instead of using ScriptManager) to make sure it's run before any other script. c#:

string basePath = Request.ApplicationPath;
// Annoyingly, Request.ApplicationPath is inconsistent about trailing slash
// (if not root path, then there is no trailing slash) so add one to ensure 
// consistency if needed
string myLocation = "basePath='" + basePath + basePath=="/"?"":"/" + "';";
// now emit myLocation as script however you want, ideally in head

2) Change baseUrl to include that:

function baseUrl() {
   var href = window.location.href.split('/');
   return href[0]+'//'+href[2]+basePath;
}

score 5 · Answer 3 · answered Jun 10 '11 at 19:26

5

Create an app root variable...

var root = location.protocol + "//" + location.host;

And use an absolute URI (instead of relative) when you are making AJAX requests...

url: root + "/Controls/ModelSelectorWebMethods.aspx/getDeviceTypes"

answered Jun 10 '11 at 19:26

Josh Stodola

81,538
47
180
227

score 1 · Answer 4 · edited May 26 '13 at 22:20

1

I think this function will work... it is to get a relative path as "../../../" so if you invoke this function in each page, this will return a relative path format.

function getPath() {
    var path = "";
    nodes = window.location. pathname. split('/');
    for (var index = 0; index < nodes.length - 3; index++) {
        path += "../";
    }
    return path;
}

edited May 26 '13 at 22:20

michaelb958--GoFundMonica

4,617
7
31
35

answered May 26 '13 at 22:00

Paulo Salazar

11
1

user3869206 · Answer 5 · 2014-08-20T21:03:14.310

0

You can import the namespace at the beginning: System.Web.Hosting.HostingEnvironment

  <%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.master.vb" Inherits="Site" %>
   <%@ Import namespace="System.Web.Hosting.HostingEnvironment" %>

and on js:

  <script type="text/javascript">
        var virtualpathh = "<%=ApplicationVirtualPath  %>";
   </script>

edited Aug 20 '14 at 21:03

answered Aug 20 '14 at 20:58

user3869206

1
1

score -2 · Answer 6 · answered Jun 10 '11 at 19:01

-2

Could you use window.location.pathname?

var pathname = window.location.pathname;
$.ajax({
    //...
    url: pathname + 'Controls/...', // might need a leading '/'
    //...
});

answered Jun 10 '11 at 19:01

David Fox

10,603
9
50
80

This will solve the problem of the JS file being in the wrong place, but it will now break if the actual *page* is not loaded from the root. – Jamie Treworgy Jun 10 '11 at 19:18

How to get relative path in Javascript?

6 Answers6

Linked