I am developing a django app in which i have made a static folder in app folder. I am encountering a problem related to static file. The problem is that while i run the app by runserver command, django does collect static files but when i change something in those static files sometime file gets updated and sometime does not get updated and instead it collects old version of those files even if i save the file and run the app again by runserver command. When I rename the static files (both css and js files) and change the index.html as per new names, the app works totally fine with updated file names for a while and i face this problem again and again. I am tired of renaming the files and not got any proper solution to this problem. I will be thankful for your opinion and help.
The folders of my app look like this:
├───.vscode
├───Project
└───manage.py
└───Project
└───__pycache__/
└───__init__.py
└───asgi.py
└───setting.py
└───urls.py
└───wsgi.py
├───templates
│ └───base.html
└───AppName
└───templates
└───index.html
└───static
└───AppName
└───js
└───indexjs.js //--> This file gets loaded with updated version and sometimes not
└───css
└───style.css //--> This file gets loaded with updated version and sometimes not
└───views.py
└───models.py
└───urls.py
.
.
.
.
static files setting in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'AppName/static')]
static file settings in my index.html file looks like :
{% extends 'base.html '%}
{% load static %}
{% block content-style-1 %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="{% static 'AppName/js/jquery-3.5.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'AppName/css/style.css' %}">
<script src="{% static 'AppName/js/indexjs.js' %}"></script>
{% endblock %}
{% block content-1 %}
<div class="main">
<p>To do App Django-1</p>
</div>
<div class="main-container-1">
<input type="text" id="textbox-1" name="name" width="50px">
<button type="button" id ="btn-2" class="btn btn-primary">Create</button>
</div>
<div class="card mb-1" id="task-card-id">
<div class="card-body"><p>Card Content</p><button type="button" id="btn-3" class="close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
{% endblock %}
Sometimes you have to hard refresh the browser to see the changes, especially if it's Chrome. Try deleting the cookies as well to see if the problem stops. What I do sometimes is open the same page in another browser for direct comparison.
You can hard refresh by holding down ctrl and clicking the reload icon.
Sometimes, the CSS doesn't update because it is saved in the cache. When you edit the CSS, try to clear cache by doing (if you are on google chrome):
At the top right, click More .
Click More tools. Clear browsing data.
Next to "Cookies and other site data" and "Cached images and files," check the boxes.
Click Clear data.
What do you mean by "file gets updated" ? Do you mean you can see the effect of changes in the browser?
If yes, I have the same issue wirh Firefox. It has nothing to do with the development server (runserver) but Firefox does not reload css files in a reliable way. Even when restarting. With other browsers I never had that issue.
You can try to empty cache with addons. I read about forced reload in Firefox with Shift+reload (or Ctrl?), but it did not always work in my case.
Related
I have an img folder in the same directory as my html files. I want to put images onto my site but I am doing something wrong.
this is the code:
{% block a %}
<div class="row">
<div class="col-sm-4 center">
<img src="img/img01.jpeg">
</div>
</div>
{% endblock %}
this is what happens when I run the local server.
this is my file directory
Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, we refer to these files as “static files”.
Those files need to be handled another way as your templates. The documentation can be found here.
It comes basically down to defining a seperate static directory inside your app. It is really good explained in the documentation.
I have this in my base.html file included
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
And I'm using navbar navbar-expand-lg navbar-light from Bootstrap for my navbar.
This is working. When I'm using a small display (like smartphone) it shrinks the menu to dropdown element with a button to expand.
But the {% bootstrap_javascript jquery='full' %} part is taking too long to fully load the jquery source from network:
Around 400ms without cache. I would like to lose this waiting time as much as possible.
So I downloaded latest jquery 3.6.0 from official site, saved it locally in my static files like
static/main_app/scripts/jQuery.js
loaded it locally with
<script type="text/javascript" src="{% static 'main_app/scripts/jQuery.js' %}"></script>
in my base.html. This works and jQuery is working fine. But the Bootstrap's nav-bar buttons are not responding.
There is also not error message in browser's console.
So I though: Maybe the jQuery version is wrong?
So I tried to implement again working version to my site
{% bootstrap_javascript jquery='full' %}
, look for source of the file above in dev-tools of my browser, copy & pasted the source code to my jQuery.js file and loaded the site again. Nothing changed and the navbar still not working.
Is there something I'm missing?
*** UPDATE ***
It works when I set
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
but with
{% load bootstrap4 %}
IT means I'm loading bootstrap two times...
I was able to overwrite BOOTSTRAP4 pip package settings (jquery call) from CDN to local file in settings.py like this
BOOTSTRAP4 = {
"jquery_url": {
"url": f"{STATIC_URL}main_app/scripts/jquery.js",
},
}
Also here are another options to overwrite as well
I'm using auto generated HTML which has been saved to a file and then read in again to use as part of a page in a django template.
In order to do this I have used:
{% autoescape off %}
{{ my_html }}
{% endautoescape %}
However, in the my_html variable, I have some static content. This comes in the form of something like this:
<img src="{% static "img/tree_report.png" %}" width="12px" height="12px"/>
My issue is that the static content is not displayed. I get:
http://127.0.0.1:8000/%7B%%20static 404 (in the browser error report)
I read something about get_static_prefix in another question but that doesn't solve my problem because I just get this instead:
GET http://127.0.0.1:8000/%7B%%20get_static_prefix%20%%7Dimg/tree_report.png 404 (Not Found)
I also tried endautoscape turning on and off periodically in my_html in the saved HTML variable. That also didn't work.
Should I be autogenerating the development and production static files paths for my_html or is there a more elegant solution to this problem?
Any suggestions are most welcome.
Thanks.
I get the templates files, I divide them to static files and templates files.
As you know I can not correct open the html in browser now, because thier path all changed.
I can in the templates files to change every link or script and image path one by one, but its a trouble things, takes our away many time.
Is there a simple way to do that?
EDIT
I changed to this, but not works for me:
{% load static %}
<!--<link rel="stylesheet" href="../static/css/default.min.css?t=227" />-->
<link rel="stylesheet" href="{% static 'css/default.min.css?t=227' %}" />
in the browser debugger, it become this:
<link rel="stylesheet" href="/static/css/default.min.css%3Ft%3D227">
If I understand the question correctly, you need to use the {% static %} tag in the templates, like this:
{% load static %}
...
<img src="{% static 'images/favicon.png' %}">
For more information, check my detailed explanation.
I'm working to build a django web application. I'm using adobe brackets for the html and I'm trying to use an image from my folders on the website. The image appears during the brackets simulation, but not during django runserver.
here is my folder directory:
mysite-
Images-
livestream-
helloworld.jpg
templates-
livestream-
helloWorld.html
This is a very simplified version of the site, but you get the idea.
My html code asks for the image:
<img src="../../Images/livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
when I run the django server it returns:
[18/Jul/2013 09:11:40] "GET /livestream/Images/livestream/helloworld.jpg HTTP/1.1" 404 2605
Does anyone know how to fix this issue?
This has to do with how your staticfiles app related settings are set up for your project.
You should also use the static template tag in order to fetch your static media.
For example, assuming that your structure under the location of any filepath within the STATICFILES_DIRS tuple is the following:
{{STATICFILES_ROOT_DIR}}/Images/livestream/helloworld.jpg
you can fetch the static file using:
{% load static from staticfiles %}
{% static "Images/livestream/helloworld.jpg" as myimg %}
<img src="{{ myimg }}" alt="helloworld" />
Why don't you set your {{ STATIC_URL }} in your settings, as per the docs to point to your Images folder and then just type in
<img src="{{ STATIC_URL }}livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
This is the standard approach to manage static files, and will turn out useful in the future as well