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"
Related
enter image description here
There are several html files(index.html, somewhere1.html, somewhere2.html...),
and they all include same js file(script.js). And the js file(script.js) fetches a json file(data.json). The problem is, when script.js tries to fetch data.json, I cannot use same relative path(./data.json). I know I can use absolute path, but I cannot confirm where the whole folder would be located so absolute path can be changed depending on the situations.
How can I solve this problem?
When I'm running a demo locally using polymer serve, I get an error that a path to a js file is bad. This js file is used in my-imported-element, which is imported.
If I fix it here, then I get a bad path error in production when I deploy the app
How can I make the path work for both? This is also an issue with image files.
What works locally if I'm running a demo that imports my-element:
workerFile: "../bower_components/my-imported-element/js/Broadway/Decoder.js",
What works on the project server:
workerFile: "bower_components/my-imported-element/js/Broadway/Decoder.js",
As I understand it, running "polymer serve" and going to the demo will open from a made up "components/my-element" path like so:
http://127.0.0.1:8081/components/my-element/demo/
So I guess the path I need is
http://127.0.0.1:8081/components/my-element/bower_components/my_imported_element/js/Broadway/Decoder.js
Do I need to just make a hacky line in the code that checks the URL for "demo" and conditionally adds the "../" to the path? Or is there a better way to do this?
The solution is to use a polymer method called resolveUrl. This "Rewrites a given URL relative to the original location of the document containing the dom-module for this element. This method will return the same URL before and after vulcanization."
So far, whether I'm running this line in the individual element's demo page, or importing the element from somewhere else, the path works out perfectly.
workerFile: this.resolveUrl("js/Broadway/Decoder.js")
I have the following solution structure.
cabinet (folder)
cabinet.aspx
images (folder)
script (folder)
folder1
menu.js
userControl (folder)
menu.ascx
default.aspx
Inside of userControl I have menu.ascx (UserControl).
Inside of menu.ascx I am referencing several .js files. For example:
<script src="./script/folder1/menu.js"></script>
When I view the default.aspx that calls menu.ascx it works fine.
However, when I'm in the cabinet folder looking at cabinet.aspx (cabinet\cabinet.aspx) that also calls menu.ascx
<%# Register Src="../userControl/menu.ascx" TagName="menu" TagPrefix="uc2" %>
The menu code is in the source but the menu.js file is a 404
http://localhost/cabinet/script/menu-files/menu.js
It looks like it needs to go directory further out. I would of expected it to go to:
http://localhost/script/menu/menu.js
What do I need to do to accomplish this?
One of two approaches:
Anchor the script reference to the site root with an absolute reference via "/script/folder1/menu.js" (note how it starts with a forward slash). For example, <script src="/script/folder1/menu.js"></script>. This says to look at the root of the site and carry on from there.
Have the script tag runat="server" and root it to the application root via "~/script/folder1/menu.js" (note the "~/" start). For example <script runat="server" src="~/script/folder1/menu.js"></script>. This determines the site root server-side and generates the correct path accordingly.
In all cases except for when your development environment doesn't allow it (I'm showing my age there going back to WinXP for development) or you are configuring an app that will live in a virtual application sub-directory in your site, go with the first option.
I figured out that the issue was the Visual Studio Web Instance that was being fired off and the fact that there were headers that needed to be set on IIS to allow the code to work.
So essentially I installed IIS 7.5 and created a site and now I just attach to the process to do my debugging for this.
Once I got IIS setup correctly the paths that were in code worked.
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.
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.