jQuery ajax request relative path - javascript

I'm implementing a jQuery plugin that needs to use some html markup. I try to load the html code by ajax request but the problem I'm facing is it doesn't accept relative paths. I can't specify the path from root folder because I need this plugin to run as library and I don't know on which path the user of the library will put the library folder.
If it's not possible to do something like that what is the best possible workaround. Personally I don't like to put the html markup inside of the javascript code.
UPDATE
html import seems to solve my issue but unfortunately most of the browsers don't support this future yet. Here is a link that describes what html import is http://www.html5rocks.com/en/tutorials/webcomponents/imports/

You shouldn't have to specify an absolute path. jQuery.ajax will accept a relative path. Just be sure to prefix the path with '/'.
The result here is that it will access the relative path of whatever domain/host the script is currently executing.
Alternatively, you can also make the host configurable within your app.

Related

How to reference javascript which is in the parent folder?

I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.

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'

Paths in Dynamic Page Replacing Content

For dynamic page changes without having to reload the whole content, I have found this very simple working solution:
Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/
Demo: sudojesse.github.io/dynamic-page/
However, this solution only works if you're linking to something like "sitename.html". Is it possible to do the same with folder paths?
Example:
Like it is above:
[sudojesse.github.io/dynamic-page/about.html][1]
Like I want it:
[sudojesse.github.io/dynamic-page/more/about/][2]
I have tried it but it doesn't really work!
http://sudojesse.github.io/dynamic-page/about.html
http://sudojesse.github.io/dynamic-page/more/about/
If you want it to work, you would have to rename the file to "index".
The reason for this is because the Web server looks after a specific resource when the client requests a directory. This resource is often by default set to "index"(dot)"something".

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

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