I have seen so many questions and answers on this but nothing is working.
I have a base.html which looks like so:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Django</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/style2.css" %}">
<script src="{% static 'js/jquery.1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static "js/main.js" %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
{% block js %}{% endblock %}
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
I then have a template which looks like so:
{% extends "base.html" %}
{% block javascript %}
<script>
alert("hello");
</script>
{% endblock %}
{% block content %}
In both cases, 1) The JavaScript file main.js is not loaded in. If I look at the DOM, the JavaScript file is not there. If I add in another CSS file, that works fine. Its just JavaScript.
2) The JavaScript in the block in the template doesn't run either.
Structure:
Your main template declares a block called "js" but your child template has a block called "javascript". These need to be the same.
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 {{ }}
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 facing a new problem with django. I'm developping a website (so I'm not in the production step) and I want to use javascript in my template.
When I write my script directly on my template and link it to a button the script works. But when I want to import it from a .js file it doesn't works anymore.
My static directory seems to work correctly, I can import css or even images from it.
Here is my files :
base.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% load static %}
<title>Title</title>
<link rel="stylesheet" href="{% static 'webcalendar/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'webcalendar/css/style.css' %}">
{% block script %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>
fonction_test.html : where the script is directly written in the template
{% extends 'webcalendar/base.html' %}
{% block script %}
<script type="text/javascript">
function printInConsole(){
console.log("PRINTING...")
}
</script>
{% endblock %}
{% block content %}
<button onclick="printInConsole()" class="btn btn-warning">Print in console</button>
{% endblock %}
So the previous one is working.
But if I try to import the script from a .js file in the static folder of my app it doesn't works.
calendar.js :
function printInConsole(){
console.log("PRINTING...")
}
new fonction_test.html : where I try to import the script from the .js
{% extends 'webcalendar/base.html' %}
{% load static %}
{% block script %}
<script type="text/javascript" scr="{% static 'webcalendar/js/calendar.js' %}"></script>
{% endblock %}
{% block content %}
<button onclick="printInConsole()" class="btn btn-warning">Print in console</button>
{% endblock %}
I get the following error :
ReferenceError: printInConsole is not defined
I must have done something wrong, do you have any tips to solve this ?
To my mind, your issue comes from your syntax :
<script type="text/javascript" scr="{% static 'webcalendar/js/calendar.js' %}"></script>
Please change scr="" by src="
<script type="text/javascript" src="{% static 'webcalendar/js/calendar.js' %}"></script>
If you're statics are well-defined, it should work.
I have a practice app and Angular JS installed through NPM on my machine at work. I call it in my base.htm which all templates extend:
{% block main_header %}
<!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">
<title>Sitename</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<link href="{% static "screen.css" %}" media="screen, projection" rel="stylesheet" type="text/css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</head>
{% endblock %}
I just tried reinstalling it to be certain, it is installed. At
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default there is an example, and I put it in my django app at business_index.html as so:
{% extends 'base.htm' %}
{% block body_block %}
....some code
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
{% endblock %}
The some code beforehand isn't the problem, I temporarily deleted it and refreshed. Why is my text not displaying next to hellp like in the example? I must not have configured it well. Thank you
If you have never worked with Django + AngularJS before, I will assume that you are trying to use {{ variable }} in your template.
That syntax will try to render a Django variable from the view (passed by context_data).
You will need to change the AngularJS tags:
myModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
EDIT
Example:
var MyApp = angular.module('MyApp', []);
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
After you do this, when you want to call a variable or angular expression in your template you will use {[{angular_variable}]}, and when you want to call a Django variable you will use {{django_variable}}
Also you can see this answer and the AngularJS documentation for this topic
I try to import the JS file into my html.twig file. But it doesn't work. Could you give me some suggestions?
this is my layout file
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/bootstrap.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/layout.css') }}" type="text/css" media="all" />
<link href="asset('bundles/ensjobologic/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/flat-ui.css') }}" type="text/css" media="all" />
{% endblock %}
{% block javascripts %}
{% endblock %}
</head>
this is the child file:
{% block javascripts %}
{{ parent() }}
{% javascripts 'js/jquery.tagsinput.js' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock %}
the css work well. But the js file don't have any effect.
asset() is not assetic. You don't have to speficy the asset in the javascripts macro. See how to use assetic and inlcude javascripts
{% block javascripts %}
{{ parent() }}
{% javascripts '#EnsUserBundle/Resources/public/js/jquery.tagsinput.js'%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Take notice at the asset_url variable.
EDIT: For dev the assets are delivered by a controller (in default settings), so every change is detected. Only after adding new files a cache clear is needed.
for prod you need to dump them to a physically file under the web path with
php app/console assetic:dump --env=prod --no-debug