javascript file not loading - javascript

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.

Related

Include a JavaScript library in a JSP file

I'm trying to use JavaScript functions from the a JavaScript library in my JSP file to display the result on a web-browser page, but it seems like the inclusion didn't work.
I actually put the .js file corresponding to the library in the WEB-INF folder and added the following line in the JSP file to include it in it :
<script type="text/javascript" src="./jsgl.min.js"></script>
I successfully managed to use the library in a simple HTML file, that's why I don't understand why this doesn't work.
EDIT :
TLDR
Put the JS file in a folder under web content (but not WEB-INF) like [WebContent]/js/jsgl.min.js, and use the following in the JSP:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
Explanation
JSP files are compiled by the server, then processed to send data (typically HTML) back to the web browser. A <script> tag is a HTML tag that gets interpreted by the browser, not by the servlet container. So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src attribute.
The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server.
So as an example, let's say:
The browser asks for a page at http://example.com/SomeWebApp/some-resource
The servlet container internally forwards the request to a JSP at /WEB-INF/jsp/somepage.jsp
The response sent to the browser contains the script tag <script type="text/javascript" src="./jsgl.min.js"></script> (as in your question)
The browser sees the URL ./jsgl.min.js and resolves it relative to the URL it has asked the server for (which in this case was http://example.com/SomeWebApp/some-resource - note there is no trailing '/') so the browser will request the JS file from http://example.com/SomeWebApp/jsgl.min.js*. This is because the relative URL in the script tag's src attribute starts with a '.'.
Another answer suggested putting the JS file in a 'js' folder and changing the script tag to <script type="text/javascript" src="/js/jsgl.min.js"></script>. Using the same original page URL as in the example above, the browser would translate this src URL to http://example.com/js/jsgl.min.js. Note that this is missing the "/SomeWebApp" context path.
The best solution therefore is indeed to put the JS file in a static folder like /js/jsgl.min.js, but to use the following in the JSP script tag:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
The JSP will translate the ${pageContext.request.contextPath} bit into the current context path, making the code portable (if you redeploy the webapp with a different context path, it will still work). So the HTML response received by the browser will be (again, sticking with our example above):
<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>
The browser will now resolve that relative URL to the correct target.
__
*If the original URL had a trailing slash = i.e., was http://example.com/SomeWebApp/some-resource/, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js
Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content).
You could put the file under webapp/js/, then change your script import to:
<script type="text/javascript" src="/js/jsgl.min.js"></script>
In addition to being good practice, this is good as it is not relative to the location of the JSP file.
Files in WEB-INF are inaccessible.
You may put them under webapp and try accessing as mentioned above.

Javascript Path Defining

I have two servers where I want to use one script file. One location has URL http://localhost:8080/one/simple/ and the other location is http://localhost:8181. Now I have one html file hosted on both the servers where in order to use that script file I have included it like
<script src="/script.js"></script>
Now this code works fine on http://localhost:8181, but not on http://localhost:8080/one/simple/, console throws an error that the file is not available.
What's the correct way to write the path so that it can work on both the servers?
Can you try following:
<script src='<?Request.ServerVariables("PATH_INFO")?>/script.js'></script>
as suggested in answers to this question.
It is supposed to give you virtual path.

Android webview load local javascript

I am trying to load a javascript file stored on the device via html file which is loaded via a webview but never seems to load. I have tried using direct url's like you normally would in html and have also tried:
<script type="text/javascript" src="file:///android_asset/www/js/jsfile.js"/>
JavaScript is enabled on the webview settings too and works fine if I have it on a server.
Thanks if anyone can help.
Hi actually I thing you should call directly the js file because you are calling it from the browser which considers the asset folder being its root folder. You should use the "file:///" prefix when calling from java code. Try something like this:
<script type="text/javascript" src="www/js/jsfile.js"/>
You can use loadDataWithBaseURL.
Put all your javascript under an assets folder and give js file path relative to the assets directory in your script tag (in the html). Don't put a slash in the beginning of src.
Read the html into a string (htmlStr) and then load it in the webview as mentioned below.
webView.loadDataWithBaseURL("file:///android_asset/", htmlStr, "text/html", "UTF-8", null);
It has worked for me.

javascript, get script path from inside the script

Is it possible to get the Javascript server path?
For example, I have a javascript file that is in a directory, and in that directory there are some php scripts that I want to "post" to.
When I include the javascript file in my home page
<script type="text/javascript" src="assets/js/some.js"></script>
I can't access say a file like /post.php that resides in the assets/js/ directory using relative paths since the javascript is not being "run" in the directory that the home page is in.
Obviously, I can specify the path, but I was trying to think of a more robust way.
I know you can get the "script" tags and get the url of the file, and I could probably work from there, but I didn't know if such a function exists, that would just tell you.
Thank you!
Create a script that is served from bla.php and place it before your some.js
<script type="text/javascript" src="bla.php"></script>
Inside bla.php, render a javascript class and store your data in it.
i.e.
function MyConstants() {
this.HELLO = "hello";
this.POST_PATH = "/etc.php";
}
You can access the constants (or anything else) via:
var consts = new MyConstants();
alert(consts.HELLO);
Hope this helps! :-)
You can try to use a cross-browser stack tracer to get the current file name
however there are many cases where your idea this might break, For example if you add a JS cacher that complies all necessary JS files into one and compresses them.
I would say that a smarter approach is to have a principle in place with which you can figure out the urls for your php skripts, like RubyOnRails has routes

Absolute path in JavaScript script tag

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.

Categories

Resources