Absolute path in JavaScript script tag - javascript

Is there an absolute path while declaring the tag?
this will resolve if I have a aspx page in a folder (one level)
script src="../Scripts/jquery-1.4.1.js" type="text/javascript">
this will resolve if I have a aspx page in a folder (two level)
script src="../../Scripts/jquery-1.4.1.js" type="text/javascript">
this will resolve if I have a aspx page in the main root
script src="Scripts/jquery-1.4.1.js" type="text/javascript">
Do i really need to create different version for each relative path?

You may want to use a relative path from the domain root instead:
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript">

For ASP.NET MVC use Url.Content("~/Scripts/jquery-1.4.1.js") in your view. The tilde makes your path relative to the application root, which could be a sub-folder if you're running as an IIS virtual application.
If it's WebForms, try Page.ResolveUrl() or VirtualPathUtility.ToAbsolute() in your page.
(As an aside, you might also want to consider loading jQuery from a CDN)

When referencing scripts and css files in webforms applications, use
"<%=ResolveUrl("~/path/file.ext") %>"
This is similar to "#Url.Content("~/path/file.ext")" in MVC and will replace ~ (application root) with application base path regardless of whether is it root application on server or in some virtual directory. If you use absolute path (/path.file.ext) it may work for you when your application is in root of web site, but when you move it into virtual directory it may stop resolving resources.

if you need jquery use can use always one absolute path to google cdn
http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js
a good topic : what is the different form relative vs absolute paths read in :
Absolute vs relative URLs
(Coincidence : me and #Daniel Vassallo Participants in this post)

Code inserts such as "<%=ResolveUrl("~/path/file.ext") %>" do not seem to be an option if you are using Themes. If you use them, you get an exception.

I prefer using <base> tag and giving refrence as per that base tag
some thing like:
http://www.w3schools.com/tags/tag_base.asp

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript">
This one does not work at all in web form. "/" does not represent website root dir.

Related

jQuery is not working using relative path

I am developing a website. Everything is going fine. But now I need to add jQuery functionality to it, but it does not work using the relative path.
Here is my web directory structure:
ROOT
application
model
view <== index.php resides here.
controller
includes
public
css
js <== myfile.js AND jquery.js resides here.
images
This is how i am giving the relative path in the script tags.
src="../public/js/jquery.js" <== the jquery file relative source
src="../public/js/myfile.js" <== the my custom file relative source
Don't use relative path. It's trouble.
The easier way to make your script always point to the right place, no matter which page you visit, is to start with a slash at the first level directory.
If 'public' is at the public html root.
Then use src="/public/js/jquery.js"
If the first folder is 'js'.
Then use src="/js/jquery.js"

javascript file not loading

Trying to import my js file from my page.
My page is in webcontent/mydomain/templates/page.xhtml
My js is in webcontent/mydomain/test/scripts
In page.xhtml
<script type="text/javascript" src="../test/scripts/test.js"></script>
But still the script is not getting picked.
Can anyone tell how I need to give the path in src.
Try this:
<script src="/test/scripts/test.js"></script>
Provided that webcontent is the root of public web content and thus /mydomain is also a public folder and thus your JavaScript is standalone available by http://localhost:8080/context/mydomain/test/scripts/test.js, assuming a domain of http://localhost:8080 and a context path of /context, then the following should do:
<script src="#{request.contextPath}/mydomain/test/scripts/test.js"></script>
This will generate a domain-relative URL with a dynamically inlined context path, which is much more robust than fiddling with ../ which would make the URI relative to the current request URI (as you see in browser's address bar) and not to the physical location of the template file as many starters incorrectly assume.

JQuery ajax .load() to reference to the correct url

I have a localhost with a few projects, so this project in VS2010 properties->web->use local IIS web server = 'localhost/project4/'. (I can't use the normal debug VS Development Server as some components won't work in my project) Anyhow, localhost is fine no big deal, so I go on coding.
Now, in ajax when I call .load('/Account/LogOn'); it gives me 'localhost/Account/LogOn' but what I really want is 'localhost/project4/Account/LogOn' because it is sitting in the project4 directory, not the root.
Any idea how to tell ajax I need that virtual directory prefix between domain name and the rest of the url?
EDIT --------------------------------------------
Thanks guys, combined with all your knowledge, I guess the best ways to do it are:
Include the js script into .cshtml server side and use "~/Account/LogOn/" let .net figure out the path.
Make a global var remove_me_debug_only_virtual_directory = "/project4/"; in js code. append it to the domain name. this way we don't have to pull .net into the water and write js code in .cshtml.
Move the project to localhost/ root if you can, in this case I can't, because other people at work wants to access this networked server and do demo.
If your JS code is in an MVC cshtml file, use it like this:
.load('#Url.Action("LogOn", "Account")');
The proper URL will be placed in the concrete JS code.
According to .net documents,
Absolute and relative path references in a server control have the following disadvantages:
Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
Relative paths in the style of client elements can be difficult to maintain if you move resources or pages to different folders.
To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
So as described above, using ~ will lead you to the root of your web project using asp:
<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />
For more information go to: Web Project Paths
Based on your update: Possible duplicate of: base url using jQuery
Where stated by #gregguida:
var l = window.location;
var base_url = l.protocol + "//" + l.host + "/" + l.pathname.split('/')[1];
//all you need to do is work with l.pathname.split('/') to find what you need.
I am a java developer but the context is same in both case,
In your can follow the steps
Check the context of your server if root is "/" then you have to call something like,
.load('/project4/Account/LogOn');
If your application is root and you can calling this request from itself then
.load('Account/LogOn');

JS Ajax: local vs absolute path issue when using SEO friendly urls

here's the thing:
i built my site with SEO friendly urls...but i have problem now calling ajax files becaus eth epath is wrong and I cant set an absolute url when i call my files in background..
for instance my page is here (similar to StackOverflow..)
www.domain.com/product/123/this-is-a-product
but my javascripts functions, in folder /js,now they try to reach the files but they cant obvisouly because are set to relative path...
how can i solve this issue??
EDIT: Found this How to get the root path in JavaScript?
When you are using freindly urls, then you have to use path started with /. But then you are starting path from main path.

Refer to Root of Web Site in JScript

To refer to the root of a website in asp I use an ASP control (normal hyperlinks don't work!) and use the tide ~
However I am trying to achive the same with Jscript and it does not work.
I have set up a folder structure to better organise the files on my website. I have placed a Jscript file within the root of the folder structure and refer to it like this
"/superslight.js" this is in the master page
The user navigates to a page that is one folder down the link breaks down becuase it's not looking at the root of the site but the root of the current folder
Any ideas?
<script src="<%=ResolveClientUrl("~/superslight.js")%>"></script>
use two dots to refer to the parent folder :
assuming that you have the following folders structure
root---->pages---->myFile.aspx
root---->scripts---->myScript.js
you refer to myScript.js in myFile.aspx like this:
<script type="text/javascript" src="../scripts/myScript.js" />

Categories

Resources