Below is what I have in my head section in my base html page. This script works- just like how I want it to. How do I add the script to static folder? Like I want to create a seperate js folder and make file for this script.
<head>
<link href="{{ STATIC_URL }}reservation/css/main_css.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".asu").click(function(){
var foo = $(this).text()
alert(foo);
});
});
</script>
</head>
You can always do:
<head>
<link href="{{ STATIC_URL }}reservation/css/main_css.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="{{ STATIC_URL }}reservation/js/main.js"></script>
</head>
Now, in the file main.js (Assuming you want the folder structure to be reservation/js under the {{STATIC_URL}})
$(document).ready(function(){
$(".asu").click(function(){
var foo = $(this).text()
alert(foo);
});
});
Just make sure jquery is loaded before your custom js file.
Related
I am having some weird problem with using popover in my django app. When using the css and js of a latest version of bootstrap it simply does not work. When I use link to 3.4.1 version I found in some tutorial everything works just fine. I'm attaching code that doesn't work and the one that does.
Did popover function got removed in latest bootstrap?
Works (3.5.1):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Does not work (4.5.x):
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
You are missing popper.js.
Note that the bootstrap bundle js include the popper.js library. Try to load this one from CDN instead of bootstrap.js.
Require order :
Jquery
Popper
Bootstrap
I am attempting to serve a django app with a vue frontend and need some help configuring the static files.
The Question TLDR:
How do I get Django to recognize this built path as an attempt to reach a static file, or alternatively, how do I modify the post-build injection path on the Vue side to match the current Django static-file settings?
Django serves the built index.html from vue, however it can not find the static files (scripts/css) that are autoinjected from the build process due to the path being "absolute". I have modified the vue.config.js to not autoinject the scripts (since they will need {% static %} during the build, and the template index.html to add them in appropriately.
My directory structure is as follows:
- Root
- app
- migrations
- templates
- app (outputDir)
- index.html (Built from vue)
- base.html
- templateFolder1
- templateFolder2
- various .py files
- assets (assetsDir)
- css
- static files
- js
- static files
- frontend
- public
- index.html (Template for build for vue)
- src
- assets
- components
- App.vue
- main.js
The build is run from the frontend directory, with --no-clean to not delete my django templates folder on build.
Here is my workaround for adding {% static %} tags to the built index.html. I realize I am breaking the convention vue has that assetsDir is a subdirectory of outputDir, and I am not opposed to adding another staticfile dir to the settings.py to match the convention (although my issue is still the same).
vue.config.js
publicPath: isProd ? '/app/' : '/',
outputDir: __dirname + '/../app/templates/app',
assetsDir: "../../../assets",
indexPath: './index.html',
configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
favicon: __dirname + '/../assets/img/favicon/favicon.ico',
inject: false,
minify: false
})
],
},
public/index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '<%= htmlWebpackPlugin.files.favicon %>' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key] %>' %}"> <% } %>
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.js[key] %>' %}"></script> <% } %>
</body>
</html>
The built index.html:
app/templates/app/index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '/app/favicon.ico' %}">
<link rel="stylesheet" href="{% static '/app/../../../assets/css/chunk-vendors.0ba3e87d.css' %}"> <link rel="stylesheet" href="{% static '/app/../../../assets/css/app.fb012fc8.css' %}">
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}"></script> <script type="text/javascript" src="{% static '/app/../../../assets/js/app.45295baa.js' %}"></script>
</body>
</html>
My django settings.py configuration for static files:
Settings.py
...
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "assets")]
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
...
The way my static file finders are configured via Django requires modification to the built script/css paths inside of app/templates/app/index.html.
In stead of <script src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}">
The path currently needs to be <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">
Changing the assetsDir path in vue.config.js to match the Vue convention of having assets be a subdirectory of outputDir results in a similar issue in which the path is 'app/assets/js/...' rather than 'js/...'
I decided to adjust the path that is loaded into the template during the Vue build by modifying public/index.html file as well as the vue.config.js options. I declared a const asset_dir = '/asset/dir in vue.config.js and then added this as an extra option to the HtmlWebpackPlugin to pull it into the template. Lastly, I substring the path for the static files by the length of the unnecessary portion of the path.
vue.config.js
const asset_dir = "../../../assets"
module.exports = {
publicPath: isProd ? '/app/' : '/',
outputDir: __dirname + '/../app/templates/app',
assetsDir: asset_dir,
indexPath: './index.html',
configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
inject: false,
minify: false,
assetsDir: asset_dir
})
],
}
}
public/index.html
{% load static %}
<% if (htmlWebpackPlugin.options['assetsDir'] !== undefined) { %> <% var assetDirLength = htmlWebpackPlugin.options['assetsDir'].length + htmlWebpackPlugin.files.publicPath.length + "/".length%> <% } %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static 'img/favicon/favicon.ico' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key].substr(assetDirLength) %>' %}"> <% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Pulled from htmlWebpackPlugin Docs -->
<!-- https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html -->
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry.substr(assetDirLength) %>' %}"></script>
<% } %>
</body>
</html>
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.
I am using ember js. How do I load a css style sheet from a handlebars js template
For example this doesn't work
<script type="text/x-handlebars" id="about">
<link rel="stylesheet" href="/static/css/about.css"}}
// HTML CONTENT
.......
</script>
It looks like it works to me.
<script type="text/x-handlebars" data-template-name="color">
<h3>Color</h3>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
The color of the day is: {{color}}
</script>
http://emberjs.jsbin.com/OxIDiVU/162/edit
I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});
It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});