I'm trying to embed a bokeh plot into a template (home.html), but nothing is displayed after executing the code.
here's the code.
views.py (all packages are imported)
def home(request):
s = [1,4,6,8]
h = [1,5,9,8]
p = figure(plot_width=600, plot_height=600)
p.vbar(x=s, width=0.5, bottom=0,
top=h, color="black")
script, div = components(p, CDN)
return render(request, 'home.html', {'div': div, 'script': script})
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Experiment with Bokeh</title>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>
<h1>hello</h1>
{{ div|safe }}
{{ script|safe }}
</body>
</html>
it displays nothing at the end, there's no error message, but and the page is completely blank
Help, Please!!
You are loading an ancient version of BokehJS from CDN:
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
The 0.8.1 release is now several years old. By contrast, the vbar glyph method that you are using was only added quite recently. You need to make sure that the version of the BokehJS resources that you load in your template actually match the version of the Bokeh library that you are using.
Related
I'm pretty sure that could be possible by customising the django admin site for that specific feature.
I'm trying to add this functionality using admin.py but no better luck since a week.
In the picture you can see I put a circle where I will like to add and icon that will show a tooltip saying information about that specific field or column.
List View Image
So is there any way to do it easily without customising it from templates. Because the List view is so much complex and we do not want to complicate the things doing it hard way.
I tried to find it online and in the django official docs but every time its about customising it from templates, also I can html from admin.py but it doesn't invokes the tooltip as I wanted.
The short answer is: No, django can not give you a popover inside of your ListView. Django takes care about the backend. Its purpose is to serve the content of the tooltip from database to your html template. The displaying part is the job of the frontend. Therefore you have to design your tooltip yourself using html, css and javascript.
A useful framework is bootstrap as it takes care about the javascript and css. I will give you an example.
models.py
class MyModel(models.Model):
info_field = models.CharField(max_length=50)
views.py
def my_list_view(request):
my_objects = MyModel.objects.all()
return render(request, 'my_app/list-view.html', context={'my_objects': my_objects})
list-view.html
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
{% for object in my_objects %}
<a tabindex="0" class="btn" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-content="{{ object.info_field }}" data-bs-html="true">
</a>
{% endfor %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>
</body>
I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?
You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are
{% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.
{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>
What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold">
Hello, world!
</h1>
</body>
</html>
I am new to Django, I am working in python 3.5, I linked CSS using Jinja but I am not able to see the CSS style within my HTML file, even thought I am getting 200 status in my network and the CSS file is loaded but the style is not working. Can you help me.
here is my html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="{%static
'posts/customstyle.css'%}">
</head>
<body>
<div class="container">
<h1>This is the HTML file</h1>
</div>
</body>
and my CSS file is also within 'static' folder within my project folder. I have tried changing the name but nothing is happening.
All I get in the console is:
Resource interpreted as Stylesheet but transferred with MIME type application/x-CSS.
While my network is pretty healthy and I am getting my files uploaded properly.
Here is what I am getting in console:
file uploads sucessfully
style showing but not working
I want to put an html in a string, NOT a file, like:
t = """
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>foo</title>
</head>
<body>
{{ script|safe }}
</body>
</html>
"""
script = ...
render_template_string(t, script=script)
However when I go to the actual webpage, I don't see an html page with a script, I see garbage:
"\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>foo</title>\n</head>\n\n<body>\n \n<script\n src=\"http://localhost:5006/bkapp/autoload.js?bokeh-autoload-element=ff639949-97c5-40b8-9cc2-28b78be802d1&bokeh-app-path=/bkapp&bokeh-absolute-url=http://localhost:5006/bkapp\"\n id=\"ff639949-97c5-40b8-9cc2-28b78be802d1\"\n data-bokeh-model-id=\"\"\n data-bokeh-doc-id=\"\"\n></script>\n</body>\n</html>"
How do I fix this?
EDIT: even a very simple
t = '{{ script|safe }}'
does not work, I get, in the browser:
"\n<script\n src=\"http://localhost:5006/bkapp/autoload.js?bokeh-autoload-element=07a43696-66af-4e54-a4e3-9a09ac242e38&bokeh-app-path=/bkapp&bokeh-absolute-url=http://localhost:5006/bkapp\"\n id=\"07a43696-66af-4e54-a4e3-9a09ac242e38\"\n data-bokeh-model-id=\"\"\n data-bokeh-doc-id=\"\"\n></script>"
EDIT 2: I have also tried
t = '{% autoescape false %}{{ script|safe }}{% endautoescape %}'
but that didn't work either.
I'm using Connexion if that matters.
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!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>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>