Sorry for my bad english.
I use
{% ishout.js %}
inside head to render scripts file in django template but they display as string
"<script type="text/javascript" src="http://localhost:5500/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://localhost:5500/client/ishout.client.js"></script>"
and inside body not inside head.
And other scripts after that are displayed in body too.
I searched and find out by encoding but i cannot find how to fix it.
UPDATE
This is views.py file
#login_required
def home(request):
users = User.objects.exclude(id=request.user.id)
v = RequestContext(request, {'users':users})
# return render(request, 'home.html', {'users':users})
return render_to_response('home.html', v)
This is home.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
{% load drealtimetags %}
{% ishout_js %}
</head>
<body>
<h1>Dashboard</h1>
{% for user in users %}
{{ user.first_name }}Alert (Hello)
{% empty %}
<b>No user found</b>
{% endfor %}
</body>
</html>
UPDATE 2:
This is page source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
<script type="text/javascript" src="http://localhost:5500/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://localhost:5500/client/ishout.client.js"></script>
<script>
ishout.on('alertchannel', function(data){
alert(data.msg);
});
ishout.init();
</script>
</head>
<body>
<h1>Dashboard</h1>
phucAlert (Hello)
Alert (Hello)
</body>
</html>
And when I inspect
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<script type="text/javascript" src="http://localhost:5500/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://localhost:5500/client/ishout.client.js"></script>
<script>
ishout.on('alertchannel', function(data){
alert(data.msg);
});
ishout.init();
</script>
<h1>Dashboard</h1>
phucAlert (Hello)
Alert (Hello)
</body>
Snapshot
It's because the tag is returning HTML that is getting escaped, so the browser is rendering it as text inside the body instead of as real HTML in the <head>.
Turn off autoescape around the tag:
{% autoescape off %}
{% ishout_js %}
{% endautoescape %}
Since you are including each of those js files, and you want it rendered and interpreted as html script tags, try making it a template file _ishout_includes.html instead. You don't need to change the contents of the file at all.
From there, use the {%include%} tag. It would look like
{% include _ishout_includes.html%}
Related
i want to show up my Flash Messages in my template. It works, but i cant tell the template where to show or how to show it. It appears all the time in the same place and the same style.
This is my view:
def exportBefunde(request):
(...)
messages.info(request, "Befund exportiert")
return redirect("reporting")
This is my main.html template
{% 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">
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'index.css' %}">
<title>Message Problem - it drives me crazy</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
<!-- Content from other templates -->
{% endblock content %}
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
</body>
</html>
I want to show my template underneath my content. But i appears above it. Even if i remove this peace of code:
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
the message shows up above the code. The styling is always the same. Django ignores my Code in my template. Do anyone has a solution for this issue?
so I tried loading Bootstrap to Django. But since I wanted to customize the styling with scss, instead of putting the CDN url in header, I replaced it with a separate css file which has all of the Bootstrap stylings. Here's the code.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/main.css">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
I have the correct /style/main.css file, I've checked it by ctrl+clicking it. As mentioned, the file has ALL of the Bootstrap stylings.
#charset "UTF-8";
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
### AND SO ON ###
However my Django page wouldn't reflect it. When I hit refresh I don't see any styling.
But when I restore the CDN url, Bootstrap is normally applied. I have no idea what the problem is. I would very much appreciate your help. :)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static 'style/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
settings.py
add this in your settings.py
STATIC_URL = '/static/'
if your static folder follow this path Projectname/static or if you have static folder in your app too Projectname/appname/static then you can append it in list like 2nd one
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),os.path.join(BASE_DIR, 'app_name/static'),]
To load static files in Django
Usually we keep our static files (a.js, b.css, c.png) in a folder named static.
Suppose you have the main.css file in static/css/main.css
Then change your code as
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Check out How to serve static files django
My main.css is not rendering,I am using multiple entry points in webpack.config.js file
% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta itemprop='name' content='TableGrabber Dashboard'>
{% render_bundle "main" "css" %}
{% render_bundle "vendors~main" "css" %}
<title>
{{ title }}
</title>
I expect my both app.js file will render and the routes written in them can be run by putting the URL in the browser
you forgotten to put {% render_bundle 'back_office' 'js' %} in the body of your part of the html file
your file could look like this
{% load render_bundle from webpack_loader %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- YOU COULD INCLUDE STATIC CSS FILES LIKE ... -->
<link rel="stylesheet" type="text/css" href='{% static "/css/fontawesome5.8.1/all.min.css" %}'>
<link rel="stylesheet" type="text/css" href='{% static "/css/bootstrap4.3.1/bootstrap.min.css" %}'>
<title>YOUR TITLE</title>
{% render_bundle 'first_entry_point' 'css' %}
</head>
<body>
<!-- YOU COULD INCLUDE STATIC JS FILES LIKE JQUERY ... -->
<script src='{% static "/js/jquery-3.4.1.min.js" %}' type="text/javascript"></script>
<script src='{% static "/js/bootstrap4.3.1/bootstrap.bundle.min.js" %}' type="text/javascript"></script>
<div id="react-app" style="height:100%;"></div>
{% render_bundle 'first_entry_point' 'js' %}
</body>
</html>
and in the webpack.config.js you could have the entrypoints like
.
.
.
module.exports = {
mode: "development",
entry: {
first_entry_point: path.join(__dirname, "...first_entry_point..."),
second_entry_point: path.join(__dirname, "...second_entry_point...")
},
.
.
.
I try to setup Google Analytics with django-analytical for my django project, following this guide: http://pythonhosted.org/django-analytical/services/google_analytics.html#google-analytics-configuration.
In this guide you can find the following statement :
"Next you need to add the Google Analytics template tag to your templates. This step is only needed if you are not using the generic analytical.* tags. If you are, skip to Configuration."
So my question is: Where to put this generic analytical.* tag? Is it somewhere in my settings.py file?
Thanks.
If you are planning to use Google Analytics as your service, you can simply add the following to your templates/base.html:
{% load google_analytics %}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>My Website: {{ title }}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
{% block css %}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-tokenfield.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/main.css">
{% endblock css %}
<!-- fix so that IE 9 and less will properly recognize html5 elements -->
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
{% google_analytics %}
</head>
See the documentation at: https://pythonhosted.org/django-analytical/services/google_analytics.html
I believe that the generic analytical.* tags that they refer to at the link that you posted have to do with using the following below. If I'm incorrect, others please chime in and provide the correct response. HTH.
{% load analytical %}
<!DOCTYPE ... >
<html>
<head>
{% analytical_head_top %}
…
{% analytical_head_bottom %}
</head>
<body>
{% analytical_body_top %}
…
{% analytical_body_bottom %}
</body>
</html>
I have to web page using django.
In html, I assign external image link to img src tag.
but, 403 forbidden error and not show image.
when I paste image external link to browser address, the image show.
I think.. it is referer checking. so I use ReferrerKiller.js in Changing the http referer in javascript.
first image is shown. but other is not.
I check network using chrome developer tool.
other image canceled. I don't know that.
I want to listen any idea about this problem.. Referer checking and why show only first image? other not?
below home.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span id="image_kill_referrer"></span>
<!-- <img src= ("{{ entrySummary.entry_representaion_img }}"/> -->
<script>
document.getElementById('image_kill_referrer').innerHTML = ReferrerKiller.imageHtml("{{
entrySummary.entry_representaion_img }}");
</script>
{% endfor %}
</body>
</html>
document.getElementById() returns only one item (the first item, because all images in you code have same id). Use another methods like document.getElementsByClassName.
Try following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span class="image_kill_referrer"></span>
{% endfor %}
<script>
var i, images = document.getElementsByClassName('image_kill_referrer');
var urls = [
{% for entrySummary in entrySummaryList %}
"{{ entrySummary.entry_representaion_img }}",
{% endfor %}
"DUMMY"
];
for (i = 0; i < images.length; i++) {
images[i].innerHTML = ReferrerKiller.imageHtml(urls[i]);
}
</script>
</body>
</html>
Or, use different id for each image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span id="image_kill_referrer{{ forloop.counter }}"></span>
<script>
document.getElementById('image_kill_referrer{{ forloop.counter }}').innerHTML = ReferrerKiller.imageHtml("{{
entrySummary.entry_representaion_img }}");
</script>
{% endfor %}
</body>
</html>