[this is my html file index.html]1
[this is javascript file][2]
this is project hierarchy
i have tried importing javascript file as:
<script src="{{ url_for('static', filename='/static/js/sc.js') }}"></script>
so I tried two methods for loading javascript file into html in flask app.
<script src="{{ url_for('static', filename='/static/js/sc.js') }}"></script>
second one is :
<script type="text/javascript" src="/static/js/sc.js"></script>
but i am not getting my results.
What to do Now?
Remove static from your link. You have:
<script src="{{ url_for('static', filename='/static/js/sc.js') }}"></script>
Instead, you should have:
<script src="{{ url_for('static', filename='js/sc.js') }}"></script>
Also, modify your app structure to:
project
| -- app/
| -- static/
| -- sc.js
| -- templates/
| -- index.html
| -- app.py
Your app.py file should not be in templates/.
I solved my problem by using following code:
<script src="../static/js/sc.js"></script>
plus also deleting the cached data of browser.
Related
I have my css file and bootstrap file inside css folder which is also inside static folder. My HTML is in templates folder.
static -> css -> theme.css and bootstrap.min.css
templates -> index.html
HTML
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/theme.css') }}" rel="stylesheet">
I get the following error
GET http://127.0.0.1:5000/static/css/bootstrap.min.css net::ERR_ABORTED 404 (NOT FOUND)
Also when I change something in theme.css the style doesn't change.
I am trying to run Angular inside Django project. I successfully installed it and have no errors when I run the Django server. However I do not see my Angular. app.component.html. I see my index.html of folder "templates" instead.
templates/index.html
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<p>This is a mini-blog application using a back-end built on Django 2.0 and Django Rest Framework. It illustrates how to create and send JSON Web Token authentication headers with the HTTP requests.</p>
<app-root>Loading the app...</app-root>
<script type="text/javascript" src="{% static 'clientapp/runtime.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/polyfills.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/styles.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/vendor.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/main.js' %}"></script>
{% endblock %}
Obviously, something is missing.
I am using this tutorial and looks like copied all the setttings:
https://www.metaltoad.com/blog/angular-api-calls-django-authentication-jwt
Thanks in advance.
In Django, Angular is nothing more than a set of static files.
So in order to make sure everything falls in its place, we need to load static files in order of their preference.
I suggest you visit index.html generated by webpack, just copy that order of javascript files in Django index.html in Django format.
For More info visit your browser console for errors.
For Ref: https://github.com/deepak1725/djangular
Sometimes the problem is absolutely silly as in my case.
I used old ng build.
Each time after change links to static files we need to run ng build
I looked at some other questions here and followed them but my app is still not loading CSS and I do not know what is wrong. My directory is as follows.
(index.html and edit.html here)/static/css (style.css and animate.css here)
mainfolder/templates
my HTML code to load the CSS is
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
and
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/animate.css') }}">
In Flask, static files such as JavaScript files or CSS files are served from the static folder in your package or next to your module and it will be available at /static in the application.
A special endpoint static is used to generate URLs for static files. For example:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'style.css') }}">
<script type = "text/javascript" src = "{{ url_for('static', filename = 'bootstrap.js') }}" ></script>
You need to enter the type of static file when providing the URL of this files. For example:
For CSS: type="text/css"
For JavaScript: type = "text/javascript"
If it still doesn't load, try hard reloading the page. The shortcut keys for different browsers for hard reloading the browser can be found on this page. The shortcut in Chrome (for Windows) to hard-reload is Ctrl+Shift+R
I was having trouble while using dal and tried to build a simple example.
I did almost the exactly the same as Django autocomplete light: field not populated and also applied the answer of the link.
Here are the steps I went through:
Step 1) When I add like this on header of html (just the same as the above answer):
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
The error of browser inspector console is like this:
Uncaught ReferenceError: yl is not defined(anonymous function) # autocomplete.init.js:75select2.js:117
Uncaught ReferenceError: yl is not defined(anonymous function) # select2.js:117
Step 2) So I added jquery.js and other js files on the dal library:
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
And the error changed like this:
select2.js:66 Uncaught TypeError: $(...).select2 is not a function(anonymous function) # select2.js:66dispatch # jquery.js:4435elemData.handle # jquery.js:4121trigger # jquery.js:4350(anonymous function) # jquery.js:4901each # jquery.js:374each # jquery.js:139trigger # jquery.js:4900initialize # autocomplete.init.js:45each # jquery.js:374each # jquery.js:139(anonymous function) # autocomplete.init.js:50fire # jquery.js:3099fireWith # jquery.js:3211ready # jquery.js:3417completed # jquery.js:3433
Step 3) And for the last, I found these two plugins and added and it worked!
Plugins of [Step 2)] +
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
So here are my questions:
A) Should I add all the plugins above? For example, there are two select2.js on the plugins of [step 3)] and I'm confused and wonder if they work on different ways.(If I remove one of them, it doesn't work.)
B) According to the question Django autocomplete light: field not populated, shouldn't step 2 work? Why does it occur the error?
C) On this sample code, the part of following code seems not working at all. If not with admin account, the foreign key doesn't appears on the text field, in other words, nothing can be found on the list. (from the dal tutorial, it allows 'Using autocompletes outside the admin')
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
# I also checked django-autocomplete-light not working - select2 is not a function and rearrange the installed app didn't work.
First you need to include Jquery and after that your third-party library for selection field.
Select2.min.js(Minified version of the JS file)
Select2.min.css(Minified version of the CSS file)
Then import autocomplete.js
the first select2 library file does not exists. selected link raise Host Not Found Error
select2 library is same if you comment first one it not raised error. you can download library into your static folder.
also jquery link in the last example does not exists. you can download jquery and put it into static folder.
I want to print an image by using a img src tag in a Django template file "base.html":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Foto</title>
</head>
<body>
<h1>My helpful timestamp site</h1>
<img src="google.png" / >
<hr>
<p>Made by ... </p>
</body>
</html>
In views.py I define:
def hello(request):
return render_to_response('base.html')
But the image does not show up in the browser. If I open it as a simple html file, it shows up in the browser.
In recent versions of django
<img src="{% static 'path/to/image.ext' %}"/>
That happens because Django does not know the path to this image.
Make a folder named static/, and then a folder named images/ in your project root(where your settings.py file resides).
my_project/
my_project/
settings.py
static/
images/
google.png
And then change it to:
<img src="{{STATIC_URL}}images/google.png" / >
More here.
You have got to add load static tag in the beginning of your Django template, best luck with below code.
{% load static %}
<img src="{% static 'path/to/image.ext' %}"/>