We Keep Coding

How can I generate a path relative to a Javascript/jQuery file?

I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.

Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'

Jquery relative and absolute path

I need determinate this path in jquery , actually i have one file called functions.js and inside of this one function for load url with jquery
The problem it´s the js load in the index of website and the file really in subfolder
<script src="http://www.domain.com/wp-content/includes/themes/mytheme/js/functions.js"></script>
The js called in the index of website it´s into wp-content/includes/themes/mytheme/js
And the load jquery call to : wp-content/includes/themes/mytheme/index_loader.php
I can put the absolute path to index_loader.php in jquery , but my question it´s if it´s possible no use this and calculate the path into js file
Actually :
$("#test").load("http://www.domain.com/wp-content/includes/mytheme/index_loader.php");
It´s possible this or calculate inside jquery file ? - I try and no works .....
$("#test").load("../index_loader.php");
This it´s my problem really , thank´s regards

The way JavaScript works it that it loads from the file it was called from and now the file it was written in.
In order to do what you need you need to supply the relative path from the current page you're viewing.
Example:
If current page is http://www.domain.com then you'll need to do:
$("#test").load("wp-content/includes/mytheme/index_loader.php");
If current page is http://www.domain.com/wp-content/index.php then you'll need to do:
$("#test").load("includes/mytheme/index_loader.php");
As a side note CSS is not the same way and CSS the relative path is based on the file it's written in.

this is very very late...
but I'm using this method and I'm just adding it here, in case somebody needs it in the future:
i had this problem when trying to use the same load statement from pages existing in different URLs (different parts of the site)
you can use the location js variable
location returns the current path
for example wwww.blog.mysite.com/posts/postn25/comment64
location.origin returns the domain and host (so the root of the site)
for the previous URL, it would be
wwww.blog.mysite.com/posts/postn25/comment64
so when you do
$('#my_tag').load(`${location.origin}/mypath/mypage`)
it will always look for /mypath/mypage starting from the root directory,
so even if the domain changes it will still works
PS: (unrelated)
i found out today that you can use > * to load all of what inside a tag in another, for example:
$('#my_tag').load(`${location.origin}/mypath/mypage #my_tag > *`)
would load all the HTML from #my_tag that exists in /mypath/mypage into #my_tag in the current page

How to I properly reference an image file from a script in an asp.net mvc project?

I have an asp.net application running on a subdirectory of my website (i.e. www.example.com/go/) and within a .js script file I'm trying to reference an image which is in the Images directory of my project.
When I use /Images/add.png to refer to the image, I can see the image while in debug mode, but not when the application is published (when in debug mode the application just runs on logalhost:port# and not under the /go/ url path). And when I use go/Images/add.png to refer to the image, I can see the image on the published web application, but not while testing in debug mode. What is the proper way to refer to the image resource from my script so that I can see it both in production and debug mode?
Edit
For some reason relative paths are not working.
I've experimented with ./Images/add.png and ../Images/add.png.

You could create a global javascript variable pointing to the image:
<script type="text/javascript">
var imageUrl = '#Url.Content("~/images/add.png")';
</script>
and then inside your javascript file you could use this global variable to refer to the image location instead of hardcoding its value, which as you've already found out, doesn't work when you publish the application in a virtual directory.
Needless to say that this script should be included in the view before the script that actually uses this javascript variable.

If your script is not seperate from your MVC views then just usevar image = #Url.Content("~/Images/add.png") in your script.
Otherwise, either use a relative path as you know where your script files are and where your images are relative to each other:
../Images/add.png
Or use MVC to get the relative path of the content and add it to an element that you read using the script:
<div id="myDiv" data-image="#Url.Content("~/Images/add.png")"></div>
var imageUrl = document.getElementById('myDiv').attributes["data-image"].value;
Example - http://jsfiddle.net/hbBKs/1/

You need to either reference the image from a relative path based on the script so it could be
../images/file.jpg
Or you need to include some .Net into the Javascript
var image = '#Url.Content("~/uploads/file.jpg")';
the '~' symbol says to start at the root of the project (Even in that is a sub folder)

What is the correct way to specify relative paths in streamed CSS?

I'm working in Firefox and relative paths are not working.
One caveat is that I stream my .css file using AJAX and add it to the DOM dynamically.
Another caveat is that my site is entered in one of two ways:
www.host.com (use this for production)
or
www.host.com/dev/ (use this for dev)
Images are either here:
www.host.com/host/images
or
www.host.com/dev/host/images
depending upon how you enter the site.
I can post any information needed and test out a solution.
I was using
../images/name.jpg
but the browser somehow took this for:
hosts.com/images/name.jpg
which does not exist.
This is a question about relative paths and implementing correctly.

Absolute Path URLs
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:
What is the correct way to specify relative paths in streamed CSS?
You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to google it would be ...
If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.
Relative Path URLS
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information
listed filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is
located in the/library/weekly folder on my site.
Determine the location of the page or image you want to link to. The
Beginner's Resource Center is located here: /library/beginning/
Compare the locations and to decide how to point to it From this
article, I would need to step up one directory (to/library) and then
go back down to the beginning directory
Write the link using the rules listed above: ...

Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:

The relative paths are always relative to the CSS location, not the web page location that references the CSS file. So the question is, what is the location of the CSS file to start with? If you make all paths relative to it, it should work for both your production and development URLs.

I need to test this out, but for dynamically inserted CSS all paths are relative to the root directory or www.host.com...where this resolves to...this is essentially saying all paths are actually absolute...this is the behavior I am seeing in FireFox.

MVC3 Relative URL Paths - Javascript

I have an issue with relative paths whereby when the web app is running off subdirectory of the domain, the paths are not correct. e.g. http://www.example.com/webapp/
If I use #Url.Content("~/path/to/action") on the page it is fine. I can even embed the #Url.Content("") inside the javascript script. I want to clean up the page I wanted to put the javascript inside a js file and reference that. Now that the #Url.Content is being called inside the javascript file, it doesn't seem to work (probably for obvious reasons). How can I get around this issue?
I had a look at the <base /> but that doesn't seem to work.

Now that you moved everything into a separate js file, the file is being served as static content, and the Razor syntax is not being parsed.
If you need relative paths inside of your js which might change, then you should include a script in each page which sets a path var, and use #Url.Content(...) in this script, e.g.,
<script type="text/javascript">
pathToAction = "#Url.Content(...)";
</script>
Then, declare the pathToAction var in your js file, and use it as needed.