I have a flask project and I have a templates folder and a root folder that holds my files.
The structure looks like this:
flask_py_Javascript_sandbox/
templates/
form.html
venv/
app.py
formjs.js
My form.html looks like this:
<!DOCTYPE html>
<html>
<body>
// Test form
<script src="../formjs.js"></script> // I have also tried "formjs.js", "/formjs.js"
<script>
myFunc();
</script>
My formjs.js file looks like this:
function myFunc() {
alert("works");
}
I have looked at these 2 questions but they seem to have a slightly different issues. Issues where I don't know if their fix works for my flask project:
How to call external JavaScript function in HTML and Javascript in different folder than HTML
This seems like something simple but all tutorials I've seen just tell you what to type in your files but do not give you the nuances of folder structure.
Any help is appreciated.
Here is a screenshot of my folder structure as my text is causing some confusion:
The problem was the fact that I was hosting the development site on my own machine. To import a JS file it most be in a static folder. This is not made clear in a lot of tutorials because it is handled for you.
Folder structure should have a static folder and should look like this
Root
-static
file.js
-templates
page.html
...
To load your js file into your html you need to import it like any other script but you will need to add the url_for.
<script src="{{ url_for('static', filename='file.js') }}" type="text/javascript"></script>
Better explained here.
Used in an answer here.
If you are like me you didn't know you needed a static file and no amount of searching would have help.
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
Normally I use a javascript file to import different JS files. Now having a difficulty to do it so. The project I am working on went wild and have a 5Mb JS file and I only want a piece of it to load on one page.
In a Javascript file I could import the Module like this,
import {Module} from "./components/Module";
and use as
Module.init();
But what I am trying to do is load this Module in a blade file. The js file lives under resources/assets/js/components/Module.js
Because this folder is not public I am not sure if I use something like
<script src="../../../resources/assets/js/components/Module.js"></script> on the page. Well, tried it but did not work as well.
All I want to be able to init the JS like Module.init(); inside my blade file.
I would really appreciate and directions as I am a bit confused right now:(
You cant import your files from resources directory, the only visible part of your application to users should be public folder so you should put your file into the public folder. for example
public/js/modjule.js
and import it like this
<script src="{{ asset('js/module.js') }}"
if your site is on a https protocol you can use secure_asset()
<script src="{{ secure_asset('js/module.js') }}"
I placed my files as
main
index.html
files
service-worker.js
index.js
mycss.css
where I wants to cache the index.js and mycss.css file which is not working. And due to some constraint, I can't put the service-worker.js in parallel to index.html page
Another approach of solving the problem is to set the Service-Worker-Allowed HTTP response header if the scope of service-worker.js is different from the scope of files it wants to work with. This idea helps in applications where URL rewriting is done or the context path for files is not similar to the actual directory structure.
Absolutely yes. Moreover, it is considered to be a standard practice to place similar/related files in their respective folder.
So, in your index.html you could do something like this:
<body>
<script src="/files/mycss.css"></script>
<script src="/files/index.js"></script>
<script src="/files/service-worker.js"></script>
</body>
Yes you can put your files in different folders.
When you want to "connect" your css to the html the path is:
src="files/mycss.css"
Hope this will help you.
I'm currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,