I have a query returning long/lat parameters of cities and would like to display a map in the template.
From Google's instructions, I cannot understand where to paste the javascript code.
I instead proceeded to do the following:
Created the map div in the html template (extended from base.html)
Pasted the script with API key in the javascript.html template
Added the javascript script in a map.js file in the static folder
Console shows: "initMap is not a function"
Can anyone help?
One good practise is to define a block at your base.html called footer just before closing the body element and load all js files/code in this content.
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> </head>
<body>
{% block footercontent %}
{% endblock %}
</body>
</html>
yourtemplate.html
{% extends "base.html" %}
{% block footercontent %}
<script src="myscripts.js"></script>
{% endblock %}
So i looks like you probably copy the example script tag on the documentation, the error showing on the console means thers is no function named initMap. You see at hte end of the script tag src there is &callback=initMap where initMap is the name of the function to call when the google maps js files are ready to be use.
Maybe you din't import map.js of your static folder in your javascript.html template.
Pro tip: use v=3 argument to have the stable version of the google maps api, like so (more info):
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3
&key=YOUR_API_KEY&callback=initMap">
Related
I am building a project in Django which has 5 different applications inside it. Some applications are falling under same pattern and some are not. Can I create a UI components using bootstrap on the top of all these applications to reuse over the entire project. Any help would be appreciated.. Thanks in advance
Usually that is done by creating a base template and making other templates inherit from it like this:
base.html
<html>
<head>
<title>Title</title>
</head>
<body>
<navbar> # example navbar that will be visible in each template that will extend this one
<ul>
Home
Contact
Something else
</ul>
</navbar>
{% block content %} # here is where the content of child templates will be seated
{% endblock %}
</body>
</html>
then you will make any other template and extend it with base.html
your_other_template.html
{% extends 'base.html' %} # this line makes sure your child templates inherit the html of your main template
{% block content %} # here is where you will place the content of your other templates
<h1> This is the content of a child template </h1>
{% endblock %}
Paste your component in an empty html file and then use an include statement to load that file into you template html.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#include
This way you can insert you components more dynamically throughout your project.
I have made a template (Base.html) in my django project, of Bootstrap 4 which working is fine independently.
I have also made another template (Child_Base.html) which is made with Bootstrap 3 and supposed to be injected in Base.html.
But what happening here is, when I include BS3 template in first one it is ruining many things. So, I am looking for a solution in which both co-exist and doesn't spoil other one.
Code of Base.html is supposed as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>
{% block bodyblock %}
Hello World!
{% include "Child_Base.html" %}
{% endblock %}
</p>
</body>
</html>
Code of Child_Base.html is supposed as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>
{% block bodyblock %}
Good Morning!
{% endblock %}
</p>
</body>
</html>
In actual scenario, there is product page, displaying all the books available for user to add in cart (made in BS4) in which I want to include search box (made in BS3). But code is tangled and not so self-elaborated so I have used above examples. Thanks.
why you want this?
you either include CSS files in your templatename.html file or in a different name.css file that is linked to your template, when you include bt3 and bt4 browser DOM looks like this:
pages:
index.html
files:
bt3.min.css
bt4.min.css
and then it gets crazy cause two different CSS files with same tags are in browser DOM.
I'm not telling this is not possible cause in frontend frameworks like vue.js you can config it to use CSS locally just for one component, but Django doesn't generate files like that so you can't have two different CSS files isolated from each other for one HTML page.
on second Thought:
maybe if you make your page.html with a scheme like this:
headers and other head tags...
<body>
<section>
<style>
include the entire bootstrap 4 css here
</style>
enter your bt4 elements here
</section>
<section>
<style>
include entire bootstrap 3 css here
</style>
enter your bt3 elements here
</section>
</body>
you should put .min.css in this may cause the browser to render the page with your desired styles as always CSS files are overwritten by lower CSS's in the file.
I come to Django having used the Yii2 PHP framework. One of the good features about that is it allows you to create asset files for CSS and JS which are then loaded into the base layout file at runtime. This allows you to keep the base template clean of CSS and JS markup within the head and at the bottom of the HTML document. The CSS and JS files you specify in the asset file are automatically placed in the correct position in the document and you can also specify dependencies if needed.
At the moment, with Django I am having to edit the base.html file manually which is not ideal.
I know you can use the Media class for forms, and in admin.py, which does a similar job. However, what I would like to do is to something like this (for example) in inclusion template tags or in a class based view perhaps.
Is this possible?
Many thanks!
UPDATE
Here is a similar question Is it possible to use django's custom template tags to insert code in other blocks in the template?
do you find block tag?
base.html
<head>
{% block extra_css %}{% endblock %}
<head>
view.html
{% extends 'base.html' %}
{% block extra_css %}
<link rel="stylesheet" href="YOUR URL">
{% endblock %}
I have a Django application where users upload videos (played back via html5 video tag). To handle edge cases where a user is unable to playback the video, I give them the option to download it.
For this, I'm writing JS that ensures a "download" button appears whenever a src isn't loading. Here take a look: http://plnkr.co/edit/o8YFZNaEhpJMg4YPhZCO?p=preview
The problem is that my JS resides within <head></head> and it needs to be able to access all videos I'm going to show on page.
Normally, I pass video objects as an object_list that I then iterate through (generated through a paginated ListView). But all this happens in the body of template.
How can I get access to context[object_list] within <head> so that the JS snippet I've shared can utilize the sources (I'm already inheriting <head> from base.html)? Secondly, how do I ensure I only pass video sources in page to my JS snippet?
Can someone give me an illustrative example via which I can solve this?
Define a block in your base.html that you can override in your object list template.
See https://docs.djangoproject.com/en/1.11/ref/templates/language/#template-inheritance
You can do it by adding a
{% block video_head_tag %}
{% endblock %}
inside your <head></head> tag in the parent template "base.html"
on your child template
{% extends "base.html" %}
{% block video_head_tag %}you_object_list{% endblock %}
Reference https://docs.djangoproject.com/en/4.1/ref/templates/language/#template-inheritance
Do I have to paste my ananlytics code into every page of my django app or can I just do it in one spot, the base, similar to disqus?
You can do it in the base page and that will be included in every actually generated page.
You can have, for example, a master_page.html in which you put the main wrapper HTML including your Google Analytics code. The main part of your master page would have:
<html>
<head>
<!-- Google Analytics code -->
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Then your content page will have something like:
{% extends "master_page.html" %}
{% block content %}
Your content for the page.
{% endblock %}