I have a javascript file called as follows:
<script src="js/responsiveSlides.min.js"></script>
I want to point to a copy of the js file in an equally named folder in the parent directory using the following:
<script src="../js/responsiveSlides.min.js"></script>
It is failing for some reason. What could be the reason? Both paths exist.
Related
I just set up a very basic Spring Boot Web Application with Thymeleaf, but I can't access my external JS file from the corresponding HTML file of my template and can't figure out why.
My resource folder structure is as follows:
static/
index.html
css/
graph.css
js/
createGraph.js
templates/
visualizeGraph.html
Within my visualizeGraph.html I try to call the createGraph.js using following snippet within the <body> element:
<script th:src="#{/js/createGraph.js}" type="text/javascript" >
</script>
In the <head> element of visualizeGraph.html, I added my stylesheet using following snippet:
<link rel="stylesheet" type="text/css" media="all"
href="/css/graph.css" th:href="#{/css/graph.css}" />
My Spring Boot Web Container runs on Port :8082, so I access my webapplication from localhost:8082 and access the visualizeGraph template from localhost:8082/visualizeGraph
When I check the Developer Console (F12), it throws a 404 for the createGraph.js file, but not for the graph.css file -> it can find the css successfully.
I can even access the css through localhost:8082/css/graph.css but CAN'T access the js-file using localhost:8082/js/createGraph.js (throws a 404 - as expected)
I can't figure, what's the cause for this phenomenon as my application.properties also has no additional parameters for modifying the resource source folder etc.
Okay, this was VERY weird. I found the solution, but I am not sure, whether it's IntelliJ, which was responsible for this problem or something else.
What I did was to edit my <script> element in my HTML file to the following:
<script src="/js/createGraph.js" type="text/javascript" >
</script>
and my intention was solely to try out, whether it would change anything. Somehow, IntelliJ told me, that it was not able to find the path (neither the js folder, nor the createGraph.js file within it) so what it suggested was to create the folder and the file (so I did, using ALT+Enter). What I did afterwards is to just copy the content of my old createGraph.js to the new file and to delete the (very strangely the same named) old folder and file and voila, everything works as expected... Very weird.
You can call your JS files present in resources/static folder like below:
<script type="text/javascript" src="js/script.js"></script>
No need to give the forward slash before the js folder.
below I am attaching screenshot for my code:
Here, I was having images folder inside the static folder so we can directly call that folder.
If you have any further doubts please feel free to visit my github amisham96
My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.
I am trying to load different JS file in Angular for different environment because the prefix for my js file is different and I can't save them in my local.
in dev
js file path is http://myproject-dev.com/product.js
so my html will be like
<script src="http://myproject-dev.com/product.js"></script>
prod
js file path is http://myproject.com/product.js
my html is like
<script src="http://myproject.com/product.js"></script>
I need to load them based on the environment, I have a variable set in JS to detect the environment but I don't know how to load them in html or in run time in Angular. Any tips will be appreciated. Thanks!
Use a relative URL.
Same position: <script src="product.js"></script>.
With a subfolder from current position: <script src="scripts/product.js"></script>
With a subfolder from root: <script src="/scripts/product.js"></script>
You can simply use relative paths to reference your files rather than using the full URL.
if you directory structure looks like this:
js
product.js
index.html
then inside of index.html you can reference product.js like this:
<script src="js/product.js"></script>
I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?
You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>
I am using jquery i18n plugin ( http://code.google.com/p/jquery-i18n-properties/ ) to internationalize the messages placed in jquery/js.
i have below project structure.
I have some.js file in js folder and inside some.js file i have to refer a properties file which is located in properties folder of src/main/resources folder. can i do as below? inside properties folder of src/main/resources folder i have placed Messages.properties and Messages_en_US.properties. In both the properties files i have placed myForm.success.msg=Success property. Now i am trying to access it as below. But below code does not get the value of myForm.success.msg key. instead of giving value, it is giving the key itself but not the value. Am i referring the properties file wrongly? is my properties file referring correct? Please help me.
JSP code:
<script type="text/javascript" src="./public/js/some.js"></script>
<script type="text/javascript" src="./public/js/jquery.i18n.properties-min-1.0.9.js"></script>
some.js
jQuery.i18n.properties({
name:'Messages',
path:'properties/', //as i have properties file in properties folder of src/main/resources
mode:'both',
callback: function() {
alert("message "+jQuery.i18n.prop('myForm.success.msg'));
}
});
I don't try it but I think you should put the *.properties files in public/resources directory.
And the path shoud be:
jQuery.i18n.properties({
name:'Messages',
path:'../resources/', // changed here
mode:'both',
callback: function() {
alert("message "+jQuery.i18n.prop('myForm.success.msg'));
}
Try it.
Deploy your app to a server, eg. Tomcat, and then access to the pages by server.
The root cause of your problem is a html page can't access to properties files across domain.
Unfortunately, that will not work. The JQuery plugin will always look for a properties file that are within the webcontent folder. Try this instead:
Copy those properties file inside your webapp folder and test it with actual path. e.g. resources/custom/i18n/ [Note - Here I placed the properties file inside a i18n folder and placed a resources folder under webapp]. This will fix your problem!
Now we can manage two files, but do we really need it? The easiest thing to do is have your file only in the src/main/resources folder, but as part of your build step copy this properties file to your second location (i.e. inside the webapp folder).