Problem with forward slash “/” in jQuery AJAX

Question

I always wrote URLs used by AJAX calls in this way: "/Home/Save" with the forward slash in the beginning. Now this last project is being deployed to a virtual directory on a server. Thus, these URLs aren't working anymore, because instead of "example.com/VirtualDir/Home/Save" , they would point to "example.com/Home/Save" which is wrong. I quickly fixed the problem by removing the first forward slash "/" in all occurrences of URLs in my JavaScript. All pages work great, except for one, When AJAX call happens on the problematic page. the specified URL gets appended to the page URL, I've spent a few hours yesterday and the whole morning today. and I cannot figure it out. There is absolutely nothing different about this page comparing to others? Has anyone had this problem before? Should I post my code?

EDIT: After banging my head on the keyboard for another few hours, I ended up implementing the following. I got an action in a common Controller that returns the result of Request.Url.GetLeftPart(UriPartial.Authority) , which is your http://www.mysite.com . I render it inside my Layout page into a global JavaScript variable, _AppPath . Then, every AJAX call gets its URL like this: _AppPath + '/Controller/Action' . This works everywhere and I still don't know what the hack is the problem with that page. Cheers!

Answer 1

Can you change the Ajax requests so that they instead point to "/VirtualDir/Home/Save"?

If it helps your code, you could have a path variable, so that you can easily update the virtual directory path (or remove it) when you deploy it somewhere else. Or your code could read its location via the window.location.href property and work out things out from there.

It's not so useful to have paths relative to the current document (ie without the / slash prefix) because, as you are observing, some of the pages will then fail their requests, when those pages are at a different point in the site hierarchy. An absolute URL would be the one to go for (ie with a / slash prefix).

[UPDATED, based on comments below]

@Dimskiy, it doesn't so much matter that the server-side framework is .NET MVC, or that there are no actual folders for those URLs on the server. The browser will just respond according to the URL structure it sees.

So the things to look for are the URLs in the browser address bar for the different pages, and the URLs of the Ajax requests being made to the server (eg look for these in Firebug's "Net" panel). And compare the URLs, looking at the number of folders suggested by each URL.

It doesn't matter if there isn't an actual folder on the server. The browser can't tell, it can only look at the URL structure. If the JavaScript is making a call from a page called "foo" to an Ajax resources at "Home/Save", then the request will be routed to "foo/Home/Save". And if the request is made from page "foo/bar" then it will be routed to "foo/bar/Home/Save". That's a relative path - it's relative to the containing HTML document.

A request to an "absolute" path, say, "/Home/Save" (note the / slash prefix) will always go to the root of the domain, eg example.com/Home/Save. But since you need your request to go to the "VirtualDir" virtual directory, then your URL will become "/VirtualDir/Home/Save".