Hi people I have a html file named responsive.html. I want to use angularJS here. my resposive.html looks like this
<html ng-app="a">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<title> Helooqw</title>
<body ng-controller="aA">
{{ name }}
</body>
</html>
and my app.js
var app = angular.module('a', []);
app.controller('aA', ['$scope', function($scope){
$scope.name = 'Gentle lah';
}])
But when I load the page, i dont able to see the name there. Please help on this issue. Thanks in advance.
Attached is my directory:
Added verbatim because its using django.
<html ng-app="a">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
</head>
<title> Heloow</title>
<body ng-controller="aA">
{% verbatim %}
{{ name }}
{% endverbatim %}
</body>
</html>
Related
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ static 'images/logo.png' }}" alt="Company Logo">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
-->
</body>
</html>
when including the static files in the Django-jinja template it shows an error. If I removed that line It worked. But I want to load my static files in jinja template.
First you have to load static at top of your html page
{% load static %}
Then you have to use {% %} instead of {{ }}
<link rel="icon" href="{% static 'images/logo.png' %}" alt="Company Logo">
you need to add {% load static %} first
I am currently learning django and I tried to apply bootstrap css for my little project but it keeps throwing this following error and doesn't apply.
Refused to apply style from 'https://stackpath.bootstrapcdn.com/%20%20%20%20bootstrap/4.4.1/css/bootstrap.min.css' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my code.
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css" integrity="
sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>crm1</title>
</head>
<body>
{% include 'accounts/navbar.html'%}
{% block content %}
{% endblock %}
<hr>
<h5>Our footer</h5>
</body>
</html>
Your template doesn't seem to have {% load static %} at the top. Read docs here
I think you need to create a new directory (with a static name) in your Django project. And re-create a new directory (named css).
Directory tree :
Your Project -> new directory -> static -> new directory -> css
And download bootstrap.min.css file and copy/paste into css file.
project
|_static
|_css
|_bootstrap.min.css
You can change your code as follows:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I run the jquery file in html and it works but whenever I run the code within django framework within {%block content%} {%endblock%} the sliding function does not work. Why and how to resolve this issue?
{% extends 'testapp/base.html' %}
{%block content%}
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel {
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
{%endblock%}
Move html,head, body tags to base.html:
base.html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#panel {
display: none;
}
</style>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Index.html:
{% extends 'testapp/base.html' %}
{% block content %}
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
{% endblock %}
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.
I've got master.kid (simplified):
<html>
<head py:match="item.tag == 'head'">
<title>My Site</title>
</head>
<body py:match="item.tag == 'body'">
<h1>My Site</h1>
<div py:replace="item[:]"></div>
<p id="footer">Copyright Blixt 2010</p>
</body>
</html>
And mypage.kid:
<html>
<head></head>
<body>
<p>Hello World!</p>
</body>
</html>
Now I want it to be possible to add more content before the </body> tag in the resulting HTML, specific to mypage.kid.
Basically the result should be something this:
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>My Site</h1>
<p>Hello World!</p>
<p id="footer">Copyright Blixt 2010</p>
<script type="text/javascript">alert('Hello World!');</script>
</body>
</html>
The <script> tag should be specified in mypage.kid. It's okay if I have to modify master.kid to optionally support additional content before the </body> tag, but what the content is has to be specified in mypage.kid.
At first I figured adding an element before the </body> tag in master.kid with py:match="item.tag == 'bodyend'" would work. The problem is that it uses the position of the element in mypage.kid, and not the position of the element doing py:match. So if I put the <bodyend> tag before </body> in mypage.kid, it is imported before <p id="footer">, and if I put it below </body> it will stay there.
How do I set up master.kid and mypage.kid to support adding content immediately before the </body> tag?
The best solution I've found is the following:
master.kid:
<html>
<head py:match="item.tag == 'head'">
<title>My Site</title>
</head>
<body py:match="item.tag == 'body'">
<h1>My Site</h1>
<div py:replace="item[:]"></div>
<p id="footer">Copyright Blixt 2010</p>
<div py:if="defined('body_end')" py:replace="body_end()"></div>
</body>
</html>
mypage.kid:
<html>
<head></head>
<body>
<p>Hello World!</p>
<div py:def="body_end()" py:strip="True">
<script type="text/javascript">alert('Hello World!');</script>
</div>
</body>
</html>
The master.kid page checks for a variable defined as body_end, and if there is such a variable, it will call it, replacing the contents of the element before </body> (otherwise it will output nothing).
Any page that needs to output content before </body> will define the body_end function using py:def="body_end()". The py:strip="True" is there to remove the wrapping <div>.