I run flask on my Mac and try to connect the js and css to my html using the following code. When I inspect the element, it seem like the directory is complete correct but the css and js do not have effect on my html Please help !:
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<!-- Script for using MathJax -->
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- Link to own style sheet -->
<link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet"/>
<!-- app's own JavaScript -->
<script src="{{ url_for('static', filename='scripts.js') }}"></script>
<title>Corporate Finance Assistant: {% block title %}{% endblock %} </title>
</head>
Related
Is there something wrong with this code, i have been checking the code for errors but it does not seem to display the required CSS and JS on the web page.
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Network Scanner</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<h2>Test to see if this works</h2>
</body>
</html>
If you're loading stylesheets/scripts, try just putting the path to them inside the href attribute. (No brackets). I just looked at the jinja docs and it says that expressions should be used using {{ }}
I am developing a web application with Python Flask. I need a jQuery script to make an autocomplete search field. I found this one:
https://github.com/LukasSliacky/Flask-Autocomplete
It works perfectly fine.
The problem is coming when I tri to integrate this feature in my existing template which include a lot of other CSS and JS scripts.
Here is my file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename='css/materialdesignicons.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor.bundle.base.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
<div class="container-scroller">
{{ form.autocomp.label }}: {{ form.autocomp }}
</div>
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
<script src="{{ url_for('static', filename='chart.js/Chart.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/off-canvas.js')}}"></script>
<script src="{{ url_for('static', filename='js/hoverable-collapse.js')}}"></script>
<script src="{{ url_for('static', filename='js/template.js')}}"></script>
<script src="{{ url_for('static', filename='js/dashboard.js')}}"></script>
<script src="{{ url_for('static', filename='js/data-table.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.cookie.js')}}" type="text/javascript"></script>
<script>
$(function() {
$.ajax({
url: '{{ url_for("autocomplete") }}'
}).done(function (data){
$('#city_autocomplete').autocomplete({
source: data,
minLength: 2
});
});
});
</script>
</body>
</html>
When I try it, it shows some error console:
So after searching for solution, I tried to remove some of these jquery files:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
, but I still have the same issue.
Does anyone knows how to fix my particular case?
Here is my Flask Python code:
from flask import Flask, Response, render_template, request
import json
from wtforms import TextField, Form
class SearchForm(Form):
autocomp = TextField('Insert City', id='city_autocomplete')
#app.route('/_autocomplete', methods=['GET'])
def autocomplete():
return Response(json.dumps(list_result), mimetype='application/json')
#app.route('/testsearch', methods=['GET', 'POST'])
def index():
form = SearchForm(request.form)
return render_template("search.html", form=form)
This loads jQuery (an ancient, unsupported version of jQuery with known security problems in it, but jQuery none the less):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
This loads jQuery UI (also an out of date version), which adds the autocomplete plugin.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
So that that point $('#city_autocomplete').autocomplete should be a function.
You then load a bunch of other things and we only have the filenames to go on.
You imply that everything above was added specifically for this task so since you have:
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
… we can assume that one of the two previous lines already loads jQuery.
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
… is the most likely candidate.
The new version of jQuery overwrites the one you added jQuery UI to so the autocomplete plugin goes away.
Don't load jQuery twice.
Load it once.
Load it first.
Then add jQuery UI to it.
Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.
I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.
It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.
Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.
Below is the latest that I've tried, but still no luck.
base.html
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'js/app.js' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Put the following script after the body tag.
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
Why? When loading JavaScript files, it tends to fall under one of two cases.
The Javascript file contains functions which are needed while the page is loading OR
The Javascript file contains functions which should be used after the page is loading.
Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.
P.S - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body
Adding <script type="text/javascript" src="{% static 'js/app.js' %}"></script> below my </body> fixed the problem I had with the js file not loading.
Im trying to upload templates from HTLM5 UP into the Django framework. However I'm not sure where to place some of the supporting CSS, SASS, Webfonts, Javascript files. Link to the template I downloaded below. Files I'm referring to are in the "Assets" folder.
https://html5up.net/strata
I've tried placing them in the path below. I'm using the Pycharm IDE if that changes anything.
ProjectName/mysite/templates/mysite/assets
I've been trying to call them with href="mysite/assets/css/main.css" with no success.
IDE: PyCharm
At first, you need to {% load staticfiles %} top of the .html file
And link your file like :
CSS = <link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
img= <img src="{% static 'images/rakib.jpg' %}" alt="" />
Js= <script src="{% static 'assets/js/jquery.min.js' %}"></script>
Full code:
Filename: base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title> {% block head_title %} Blog {% endblock head_title %} </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href=href="{% static 'assets/css/main.css' %}" />
<style>
{% block style %} {% endblock style %}
</style>
{% block head_extra %} {% endblock head_extra %}
</head>
I'm using Pixel Admin template, which is not a current version of now I think, to implement a jinja2 web application that using an old version of the select2 dependency version 3.5.1. It is working fine except when viewing it on iso device, that virtual keyboard is always showing on touch select2.
I know that this bug has already been fixed in select2 latest version 4.0.6, so I want to change it to this version.
layout.html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Application</title>
<script src="{{ url_for('static',filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pixel-admin.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/rtl.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/themes.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pages.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/widgets.min.css') }}">
<script src="{{ url_for('static',filename='javascripts/dynamic_con.js') }}"></script>
<!-- Remove select2 old version -->
<!-- <script src="{{ url_for('static',filename='js/select2.js') }}"></script> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="{{ url_for('static',filename='js/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='javascripts/toolbar.js') }}"></script>
<script>var init = [];</script>
{% block content %}
{% endblock %}
<script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>
<script type="text/javascript">
init.push(function () {
})
window.PixelAdmin.start(init);
</script>
</body>
</html>
Centre.html
{% extends "layout.html" %}
{% block content %}
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
{% endblock %}
when open the URL route http://127.0.0.1:5000/Centre, the select2 does not open at all ios devices but working fine on desktop view. Unless I remove main js file of pixel admin <script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>, the select2 is working fine, but other functionalities of theme will be missing as well as the main js script was removed. Therefore, this is not a solution I am looking for.
My question is how can replace select2 of version 3.5.1 in template pixel admin with select2 version 4.0.6 to make it working well on an ios device? Thanks.
Added:
I just found that in file pixel-admin.min.js which come along with themes consists of many other plugins including select2. I saw it contains an exact script of select2 script inside it. That might be a reason that I could not override it with a newer version of select2 because as said if I comment out file pixel-admin.min.js, it worked but other plugins and function inside that js file will be gone as well, I don't that. Therefore how can I overcome this trade-off? Please kindly help, I need that so badly, Thanks.
Just find the corresponding code inside pixel-admin.min.js and comment it.
Then, include Select2 version 4.0.6 in your html, as you would normally do it:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
Better try with Select2 version 4.0.5 because 4.0.6 is rc.
Have a look at the Select2 release page.
To disable Select2 in PixelAdmin and based on the file you posted, lines 1473-1475
if (window.Select2 !== undefined) {
return;
}
Change to
return;
if (window.Select2 !== undefined) {
return;
}
Which version of PixelAdmin are you using?