relative path in javascript external file

Question

I am trying to make this picture showing but I had no success.

If I do

$.blockUI.defaults.message = '<img src="../images/blockUI_Loader.gif" />';

I get from fiddler

alt text

If I do

$.blockUI.defaults.message = '<img src="../_assets/images/blockUI_Loader.gif" />';

I get from fiddler

alt text

If I use

$.blockUI.defaults.message = '<img src="~/_assets/images/blockUI_Loader.gif" />';

I get from fiddler

alt text

My folder structure is as follow

alt text

the js file is in the js folder.

Travis unfortunately did not accepted to be wrong...It deleted his answer and then came here to downvote...oh Travis Travis... — Lorenzo, Nov 12 '10 at 01:38

score 2 · Answer 1 · answered Nov 12 '10 at 00:35

2

The relative path is relative to the HTML file and not the js file. So looking above at your other files, I am guessing you need to images/...

answered Nov 12 '10 at 00:35

Amir Raminfar

33,777
7
93
123

I changed it to images/ because it should be relative to the html file. – Amir Raminfar Nov 12 '10 at 00:37
HTML file? That code is inside a javascript function that is used from almost all my mvc views... – Lorenzo Nov 12 '10 at 00:40
Yes, that's what I assumed. You are making your images relative to the JS file. But it has nothing to do where the js file is. It is relative to where the HTML file is because that is where it is being rendered. If you using it many places then you might want to set a global like base = "/xyz"; and then use base everywhere in you javascript file – Amir Raminfar Nov 12 '10 at 00:42
Where are you including the javascript file? – Amir Raminfar Nov 12 '10 at 00:45
Guys, he's using .NET. This is a web application, not a web "site". – Travis Webb Nov 12 '10 at 00:51
1

It's relative to what the browser sees as a file. If you are using routing, each level of `/parameter/parameter` looks like a folder to the browser. If you have variable numbers of path parts in your URLs, you cannot use path-relative URLs at all because each page will be at a different level relative to the target. In that case you must use rooted URLs, constructing home-relative URLs as necessary on ASP.NET. – bobince Nov 12 '10 at 00:52
@Travis: Right. It is an ASP.NET MVC web application – Lorenzo Nov 12 '10 at 00:53
@bobince: wait wait... that instruction is simply a tag the the jquery blockUI plugin will render at runtime on the page. It is not an url that will be routed – Lorenzo Nov 12 '10 at 00:55

Phil · Accepted Answer · 2010-11-12T01:23:45.413

2

An alternative solution is to apply classes to your elements via JavaScript and set a background image using CSS.

Relative url paths in CSS are always relative to the stylesheet file which can make them easier to keep consistent.

For example

Javascript

$.blockUI.defaults.message = '<div class="blockUI-Loader"></div>';

CSS

.blockUI-Loader {
    /* url path is relative to this CSS file in "_assets/css" */
    background-image: url(../images/blockUI_Loader.gif);
    background-repeat: no-repeat;
    width: nnpx; /* width of image */
    height: nnpx; /* height of image */
}

edited Nov 12 '10 at 01:23

answered Nov 12 '10 at 00:42

Phil

157,677
23
242
245

So you're saying that url paths are relative to the css while @Amir Raminfar is saying that they are relative to the HTML... who's wrong? :) – Lorenzo Nov 12 '10 at 00:46
2

Read my answer again. Relative paths in JavaScript are relative to the calling URI (the page). Relative paths in CSS files are relative to the CSS file location. – Phil Nov 12 '10 at 00:55
@Phil Brown: sorry! I've missed the CSS text. – Lorenzo Nov 12 '10 at 01:01
@Phil Brown; I have done a new trial using `"../../_assets/images/blockUI_Loader.gif"` that is relative to the Master Page from which all the pages inherits. Anyway the result is the same :( – Lorenzo Nov 12 '10 at 01:11
The location of your Master page has nothing to do with your CSS. Anyway, I've added an example. – Phil Nov 12 '10 at 01:24
@Philip Brown: Yes! That would work for sure also! Thanks for posting the code. I will probably try to change the actual found solution (look at end of the page) with yours as it is more consistent IMO. I hav eto do some trials if it is accepted from the blockUI jquery plugin. Thanks again – Lorenzo Nov 12 '10 at 01:33

score 0 · Answer 3 · answered Nov 12 '10 at 01:24

0

Finally I have found the soultion!

$.blockUI.defaults.message = '<img src="_assets/images/blockUI_Loader.gif" />';

answered Nov 12 '10 at 01:24

Lorenzo

29,081
49
125
222

why? All my pages are in subdirectory and it is working well even if the page is in a directory two levels deep... – Lorenzo Nov 12 '10 at 01:36
Given that it's an MVC application, the request URL could look like `controller`, `controller/action`, `controller/action/id` (given the default routing scheme). Each of these changes the base URI for the request and thus, any relative path requests. For example, the first will look for your image in `_assets/images`, the second in `controller/_assets/images` and the third in `controller/action/_assets/images` – Phil Nov 12 '10 at 01:40
Yes. So my pages are located, from the project root, to the `\Views\ViewName` folder. For example it is workin gon my home page that is located in the folder `\Views\Home\Index.aspx` – Lorenzo Nov 12 '10 at 01:43
Your views are not the requested page though. See my edit above – Phil Nov 12 '10 at 01:44
I think you are confusing Controller and Action with Views. Every Views in an MVC project resides in a folder that has the name of the Controller (e.g. Home) inside a root folder called "Views". When an action try to render a view the View Engine will look for the view inside the folder structure that I have just described. – Lorenzo Nov 12 '10 at 01:48
Please have a look to this SO question for more details `http://stackoverflow.com/questions/2735240/change-the-views-location` – Lorenzo Nov 12 '10 at 01:51
@Lorenzo You are confusing the files on your server (classes, views, etc) with HTTP. Requests are made to your application and it responds with content. Relative paths in that content are resolved using the **URI** used to make the initial request or a **URI** set in a `` tag in the returned HTML. This will look something like `hostname.com/xyz/controller/action` – Phil Nov 12 '10 at 01:55
I am not confusing You-re right on this. But the same rule does not apply to views. Views are rendered inside an action method that has been routed, after an http request, through a route. The action select an ActionResult to send back to the client. That result is a View. To do this, it simply select a view from disk not from another http request that would be unuseful. Look at this article `http://msdn.microsoft.com/en-us/library/dd410123.aspx` – Lorenzo Nov 12 '10 at 02:03
Sorry Philip. Do you agree that you dont call a view in an url of an MVC project? If you agree on this you ca understand that the view does pass through a route and it is part of an HTTP response not an HTTP Request – Lorenzo Nov 12 '10 at 02:06
@Lorenzo The physical location on disk for your view scripts (including Master pages) has nothing to do with how the client (browser) resolves relative paths in the returned HTML. Only the content rendered from your view is part of the response. **No** other information about the view script including its name and path on disk is sent back to the client. The only location information the client knows is that used to make the request. See http://stackoverflow.com/questions/4029091/change-the-default-path-where-the-web-server-looks-for-images/4029121#4029121 – Phil Nov 12 '10 at 02:19
I think we are saying the same thing in two different manner :) – Lorenzo Nov 12 '10 at 13:11

relative path in javascript external file

3 Answers3