I'm struggling with a conversion of a html file into a django template. It seems like the main.js file is not working but debug console doesn't throw any errors.
I have just copied the files from my local filesystem onto my webserver and changed the url of the static files. There are no 404 errors.
This is how my html document looks like on the local file system:
This is how the templated version on the web server looks like:
This my include order of the javascript files:
<script src="{% static "js/jquery.js" %}" ></script>
[...]
<script src="{% static "js/main.js" %}" ></script>
The problem was caused by the css file. I had an old file from another template with the same name in my static path.
Deleting style.css and rerunning
python manage.py collectstatic solved the problem.
Related
In my Laravel 9 project that I am working on, I want to put a javascript file containing common functions in app.blade.php. As per How to include External CSS and JS file in Laravel 5.5, I placed the js file in public/js folder and included the following in app.blade.php
<!-- common js functions added by Ravi -->
<script src="{{ asset('js/common_js.js') }}" ></script>
However, this file is not getting included on the page, and the js functions included in the file are not available in console.
Could someone advise me how to include a js file so that it is available for all pages?
Thanks.
if you are using laravel vue do this
place th common_js.js file in resources folder than change this
//in webpack.mix.js
mix.js(["resources/js/app.js","resources/js/common_js.js"], "public/js")
and in app.blade.php use this
<script src="{{ mix('js/app.js') }}" defer></script>
than
npm run dev
run command
php artisan view:clear
you need to check the path rendered by asset() if it's not the correct path you can change the asset path from the .env file ASSET_URL
I am trying to add a link to a folder in the npm_modules folder located in the root of my Django project to one of my templates. However, when attempting to do so, the path typed in is simply appended to the current url and is treated as a link. Since my folder is not there, it is not loaded and my javascript crashes.
Since it is best practice to keep the npm_modules folder in root, how do I go about referencing folders within it inside my templates?
<script src="\node_modules\angular-file-upload\dist\angular-file-
upload.min.js" type="text/javascript"></script>
You need to keep your npm package file in static folder. Then in template
{% load staticfiles %}
...
<script src="{% static node_modules\angular-file-upload\dist\angular-file-
upload.min.js %}" type="text/javascript"></script>
Assume you save your angular-file-upload.min.js in folder static/node_modules/angular-file-upload/dist
In settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
I had a java script in my JSP, which worked fine. Now I want to move it to it's own file (abc.js). I created js-Folder and placed it there.
I tried to include it with <script language="JavaScript" type="text/javascript" src="./js/abc.js"></script> which links to http://localhost:8080/ProjectName/js/abc.js (from link in HTML-Code of the page). I think this should be correct, isn't it?
Nevertheless I get errors in the browser console (Failed to load resource: the server responded with a status of 404 () abc.js)
Do I have to register the .js somewhere to be recognized?
Edit: My project structure is like this:
ProjectName
|---WEB-INF
|---page.jsp (that wants to include abc.js)
|---js
|---abc.js
The WEB-INF directory is not publicly accessible. Your HTML file accesses the JS file over an public URL. Details see here: Include javascript file from inside WEB-INF
So the solution for your problem is to place the JS file on the same level as the WEB-INF directory, so that it is served publicly and adjust the src link accordingly:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/abc.js"></script>
(How include an external JS file in a JSP page)
Here's the code I have:
In the HTML file:
<link rel="stylesheet" href={% static 'css.css' %}" >
In settings.py:
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
The css.css file is located in the static directory which is in the same directory as manage.py ,
So why isn't the css file loading?
There is also a js file which doesn't seem to be loading either, and it's in the same directory as the CSS file and I'm loading it in with the same method as the CSS file.
Also, my pc isn't currently connected to WiFi, in case it makes a difference. I'm working with localhost.
Have you configured your Static files URL.
According to best practice
STATIC_URL = '/static/'
Actually the above is too little information to help anyway. Can you tell us the application environment (production/development) etc because there are specific configurations for each in Django. Also please provide code using the code markup. Assuming you are using Django 1.11, read this for a better understanding or better yet see a tutorial for beginners
Short brief:
I have some “non-django html apps” (a folder with a index.html, some .js files and a .css file) and I want to execute them in a django website without touching their code. How can I do it?
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
Details:
I'm building a website with Django where i want to host some Construct3 games (it allows you to create HTML5 through a GUI).
When you export a Construct3 game to HTML it creates the following structure:
C3App
|_ appmanifest.json
|_ c2runtime.js
|_ data.js
|_ index.html
|_ offline.js
|_ offlineClient.js
|_ register-sw.js
|_ start.js
|_ style.css
|_ sw.js
|_ icons
| |_ icon1.png
|_ images
|_ image1.png
That is what I have tried:
1.- In my Django website I dropped the C3App in my template folder and created a view and called index.html. As a result i got a blank page with not found errors (404) for: appmanifest.json, icon1.png, style.css, c2runtime.js, start.js and register-sw.js. That is the external files called in index.html.
2.- As that dindn't work, I moved C3App to my static folder and I created a template with the same content of index.html but changing the references.
So I changed this lines:
<link rel="manifest" href="appmanifest.json" />
<link rel="icon" type="image/png" href="icons/icon-512.png" />
<link rel="stylesheet" href="style.css"/>
<script src="c2runtime.js"></script>
<script src="start.js"></script>
<script src="register-sw.js"></script>
To this others:
{% load static %}
<link rel="manifest" href="{% static 'games/C3App/appmanifest.json' %}" />
<link rel="icon" type="image/png" href="{% static 'games/C3App/icons/icon-512.png' %}" />
<link rel="stylesheet" href="{% static 'games/C3App/style.css' %}"/>
<script src="{% static 'games/C3App/c2runtime.js' %}"></script>
<script src="{% static 'games/C3App/start.js' %}"></script>
<script src="{% static 'games/C3App/register-sw.js' %}"></script>
After the changes I got 2 not found errors for: data.js and offlineClient.js. Two files called several times in c2runtime.js.
So c2runtime.js needs to be touched too. And this starts to become too dirty, I'm modifying more than one file, in more than one place. So every time I will want to make an update for a game I will need to modify all that files again. Sounds like stupid work and an easy way to introduce bugs.
The perfect scenario would be drag the folder (exported game) and work. Is there a way to do that posible? Any idea?
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
I have some “non-django html apps” (a folder with a index.html, some
.js files and a .css file) and I want to execute them in a django
website without touching their code. How can I do it?
There a lot's of ways in which you can, but you shouldn't
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
As above, if this is a static non django app (or even a dynamic one). Don't mix it with django. It should be the responsibility of the webserver (Nginx, Apache) etc to route the django app related urls to your WSGI server. And to route the non django app urls to whatever that hosts it.
ps:
You should not run the dev server in production as it's unsafe. The nature of your question gives the impression that you maybe doing so.