Develop Reference

Using jQuery locally with Bootstrap for Django wont respond

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

Django Static Files sometimes load, sometimes not load

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.

Flask app hosted on Heroku shows Bokeh plot on my computer but not on any other computer

I'm new to Flask and hosting apps on Heroku. I have written a fairly simple Flask App, and when I host it on Heroku and go to the app URL it displays the Bokeh plot correctly on my computer. However, when I access the app URL from any other computer the app loads fine (no error), but does not show the plot. Even the border for the Bokeh plot is missing. You can choose different cities from the drop-down menu, and the URL changes accordingly, but no plot is ever shown.
I have tried to figure out if the API call could be an issue, or the HTML file, but as far as I can tell neither is specific to my system. I have also tried modifying the Procfile using suggestions I found online, but none changed this behavior.
edit: I have figured out what the problem is. I'll detail the issue (and solution) below so if anyone else runs into the same problem they can see if the same solution works for them.
For me at least, the problem turned out to be in my html file. I've included it below.
<html>
<head>
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css"
rel="stylesheet" type="text/css">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
</head>
<body>
<H1>Cuisine Histogram</H1>
<form action="/">
<select name="zip_code">
{% for feature in list_of_zips %}
{% if feature == zip_code %}
<option selected value="{{ feature }}">{{ feature }} .
</option>
{% else %}
<option value="{{ feature }}">{{ feature }}</option>
{% endif %}
{% endfor %}
</select>
<input type="submit">
</form>
{{ script|safe }}
{{ div|safe }}
</body>
</html>
It turns out that if the reference and script calls are changed from http to https the plot displays correctly from any computer. Apparently the calls were silently being refused in the background to the pydata page. Changing to https allowed them to go through.

It turns out that altering the call to the bokeh scripts from http to https resolved this issue. With the links changed to https the plot displayed correctly on all browsers on my system and on many other computers as well. Apparently the calls were probably being silently refused in the background, hence why there were no errors but just a large empty space where the plot should be.

How to use autoescape off AND static variables inside django template

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.

What's the difference between template include and static include in Django?

I'm trying to learn Django at the moment and am trying to make sure I'm not doing anything stupid.
I'm in the process of making my web page more modular in the sense that I am removing hardcoded values in the template (base .html). Doing so, I'm trying to convert hardcoded CDN references (jquery, bootstrap, etc.) to modular pieces that can be included in every web page. Doing so will allow me to change a single file in the future, instead of being forced to go to every web page and make that change.
However, I'm slightly confused. I'm trying to determine if it would make sense to copy them into a html file and use Django's {% include '' %} template tag to directly include the cdn portions, or if using Django's static include would be more appropriate.
So what exactly is the best route? It seems like it would be very easy to use template includes for everything static in all honesty. Why not use it to include javascript or css?

Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, we refer to these files as “static files”.
We call them 'static' simply because they aren't dynamic i.e the contents of these files are relatively fixed, either by design or by it's intrinsic characteristics (eg: binary content like images) and thus does not need to processed by our application server.
We differentiate them from other files because it's advisable to serve these static files at a lower level, for example, using nginx. This allows us to serve these files faster as is which leads to performance gains. It also allows easy caching.
But when using a CDN, you offload this work from your server to somebody else's server.
Now coming back to your question. You shouldn't have to declare your resources in every template. Usually, base.html contains the base of the page which can then me extended (read: template inheritance) by more specific (children) templates.
To understand this quickly, here's an example:
base.html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="~~CDN HERE~~">
<script src="~~CDN HERE~~"></script>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
article.html
{% extends "app/base.html" %}
{% load static %}
{% block body %}
<h1>{{ page_title }}</h1>
<img src="{% static 'app/img/detective.png' %}" alt="detective" />
{{ page_content | safe }}
{% endblock %}
Now for every article on your site, you render the article template which automatically extends the base removing the need to mention your css/js files for multiple pages.
If you're using different resource files for different pages, you can creation an additional block like {% block css %}{% endblock %}
and then add this to your article.html
{% block css %}
<link rel="stylesheet" href="{% static 'app/css/article.css' %}">
{% endblock %}
Notice how I'm using static for image, which is served directly by nginx.
Theoretically, you can club your CDN links into a file and then include it in base.html, but it just leads over modularity which causes redundant complexity.
Let me know if you have any issues!