0

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.

Improve this question
1
  • Travis unfortunately did not accepted to be wrong...It deleted his answer and then came here to downvote...oh Travis Travis... Commented Nov 12, 2010 at 1:38

3 Answers 3

Reset to default
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 */
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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? :)
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 Brown: sorry! I've missed the CSS text.
@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 :(
The location of your Master page has nothing to do with your CSS. Anyway, I've added an example.
|
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/...

Improve this answer

8 Comments

I changed it to images/ because it should be relative to the html file.
HTML file? That code is inside a javascript function that is used from almost all my mvc views...
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
Where are you including the javascript file?
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.
|
0

Finally I have found the soultion!

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

11 Comments

why? All my pages are in subdirectory and it is working well even if the page is in a directory two levels deep...
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
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
Your views are not the requested page though. See my edit above
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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.