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

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'

Related

Modifying viewer.js file

According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:
http://localhost/MyProject/viewer.html/?file=file.pdf
This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.
So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.
Summary of my project:
Single page application
All templates are being maintained in a single file within an Object of name - templates
To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:
pdf.js
pdf.worker.js
viewer.js
l10n.js
viewer.css - I am not loading this file dynamically.
After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)
Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?
Firefox and chrome doesn't throw any error.
Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.
Some important points while modifying viewer.js.
It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
You can create your own viewer.js file by visiting each js files available here.
If you have only small things to modify in the existing demo viewer.js, then
Mention the exact path for pdf.worker.js file inside your viewer.js.
This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.
webViewerLoad();
I hope this will help someone.

How to specify absolute path when the program parses relative path?

I'm using a Javascript library which takes a string specifying a relative path as an option. Using this path, it loads a CSS files which is used for the theme. However, I have placed the themes files elsewhere and want to reference this using an absolute path instead.
This path is relative to the page which calls it. So if the path I gave was /absolute/path/file.js, and I am on [host]/abc/def/ghi, it will call [host]/abc/def/ghi/absolute/path/file.js. If I am on [host]/xyz, it will call [host]/xyz/absolute/path/file.js
I cannot simple go up two or three levels ../../ because that might not be the root directory. Instead, I am doing ../../../../../../../../absolute/path/here.css, to ensure it goes as far back as practically necessary, which does work.
There are no option in the library to use base path.
Is there a more elegant way to specify an absolute path when the library parses only relative paths?

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

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.

Categories