I would like to ask a question about django base templates. How do they exactly work..What do I mean.
I have a base file that lets say has a static conten and a block content that changes in templates that extend the base file.
base.html
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<div class="side-nav">
<!--static content here-->
</div>
<div class="content">
{% block "content"%} {%endblock%}
</div>
</body>
</html>
I have three templates that extend base.html, e.g t1.html, t2.html and t3.html. All of them have some dom elements that are edited by the main.js file importedn in base.html. My question is the following. Does it load all the page its time i render a template and thus main.js is run again or does it only render the "dynamic" content of the base file? Will the code of main.js run everytime I load a template that extends base.html?
You basically have to understand a basic difference:
Rendering in done on the Server Side
JavaScript works on Clent side.
So if JS is sent again to Client side than it will definitely run again
You can read more about Templates in Django here : https://docs.djangoproject.com/en/1.5/topics/templates/
Django put together all templates at first. After that completed page will be send to browser. Your javascript code run in browser with full page.
Related
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.
This is my index page in django
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<meta charset="UTF-8">
<title>My test</title>
</head>
<body>
<div id="app">
<h1>TEST</h1>
</div>
{% render_bundle 'main' %}
</body>
</html>
And this is a standard Vue navbar.
<template>
<v-app id="sandbox">
<v-navigation-drawer
v-model="primaryDrawer.model"
:clipped="primaryDrawer.clipped"
:floating="primaryDrawer.floating"
:mini-variant="primaryDrawer.mini"
:permanent="primaryDrawer.type === 'permanent'"
:temporary="primaryDrawer.type === 'temporary'"
app
overflow
><v-switch
v-model="$vuetify.theme.dark"
primary
label="Dark"
></v-switch></v-navigation-drawer>
<v-app-bar
:clipped-left="primaryDrawer.clipped"
app
>
<v-app-bar-nav-icon
v-if="primaryDrawer.type !== 'permanent'"
#click.stop="primaryDrawer.model = !primaryDrawer.model"
></v-app-bar-nav-icon>
<v-toolbar-title>Vuetify</v-toolbar-title>
</v-app-bar>
</v-app>
</template>
The code is working, and i can see Vue being loaded when i open my Django site.
The problem with this is that i don't know how to get them along. For example, i added a <h1>TEST</h1> but it does not appear when i load Vue, since the Vue part covers it. I also don't understand, if i have a conditional on my Django template, such as {% if user.is_authenticated %} i can't use it on Vue, because it won't be loaded by it.
For example, i have a navbar. Instead of that navbar i want to use the below Vue navbar but i can't, because the current navbar has some links to parts of my site, and since the links are made in Django template language, they won't be loaded by Vue.
You should understand that Vue is a frontend framework that is agnostic to the backend, and Django is, in contrast a backend framework (that can be used in such way to be agnostic to the frontend, I assume this is what you are trying to do).
The way Vue works is that it renders the content inside the div#app tag in index.html, that's why your h1 tag doesn't work. you will have to include that h1 tag inside your vue app in the right component in order to work (don't forget to recompile your components after editing, in case you are using smthng like webpack...etc).
Regarding the Django conditionals part, the point is that now, your Vue app is a seperate application than the Django App (and they will have to communicate through an API using HTTP calls). So in order for authentication to work (or any other logic), you will have to handle that logic both in your Vue app and your Django app
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">
I tried to find the solution to this problem on stackoverflow and google but couldn't find it. The issue is using same controller twice on the same page and only the first controller mention gets invoked.
So I have a base template and main page. Now mainpage inherits two completely different blocks - sidebar block and main content block. both needs my controller - myController but the moment I use ngController with same controller name on the page twice on these two completely different divs only the first one gets executed.
Gist: https://gist.github.com/keshavagrawal89/356bb68068ac3ed4ae4e#file-samecontroller
<!-- base.html -->
<div>{% block sidebar %}{% endblock %}</div>
<div>{% block content %}{% endblock %}</div>
<!-- MainPage.html -->
{% block sidebar %}
<ul ng-app="myApp" ng-controller="myController">
<li></li>
</ul>
{% endblock %}
{% block content %}
<div ng-app="myApp" ng-controller="myController"> my page content</div>
{% endblock %}
What am I missing?
You cannot use multiple ng-apps in the same application. Ideally you would just put it in the root of your app or create an app including multiple apps and place it in the root, in the example below all the entities registered in both the apps will be loaded into the myApp module.
ex:-
angular.module('myApp', ['App1', 'App2']);
But in your case it seems like your app may or may not be the same, so best way would be to manually bootstrap your app.
But remember when manually bootstrap your app it is generally not to use ng-app
angular.element().ready(function() {
angular.bootstrap(elmRoot, ['myApp']);
});
Plnkr
Note: You should not use the ng-app directive when manually bootstrapping your app.
the only problem with your code is multiple ng-app's as PSL says on the comment.
ng-app declares the scope for DOM objects for angularjs to parse and it should be use once
typically in the html tag like
<html ng-app="app"> or <html ng-app>
i recommed using a name for the app module
here is a working example
Last time i make my way through python library - django. I have idea how MVC model works and other basics about creating django projects. I'm going to create site in django but there is one thing that loom large in my mind.
After i will create apps for managing articles, polls, and other likely to change content of site, i have to join it together on one page. By lack of knowledge it looks awful for me.
To make index page, i mind to create app and connect it in URLconf to '^$'. Then, i will have large template containing everything in html - head, meta, includes(js, css) etc. It doesn't sounds good for me(probably lack of knowledge). Look..
How i will be able to get link to specific content on site(i.e. article) to give it to somebody? I need /article/2013/02/55 show specific article but it needs to use my index page for meta, includes, entire structure of site etc. I can't imagine how I will be able to connect it together.
I'm in the course of "The Definitive Guide to Django: Web Development Done Right" book. Maybe i will get answer later but I'm nervous and impatient. It would be great to make use of ajax and some jquery-ui on site but i can't even imagine how to do static site with nested apps!
You just need to extend the base template and use blocks.
base.html
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="...">
<script>...</script>
</head>
<body>
{% block content %}
Content from the base template
{% endblock content %}
</body>
</html>
appname/templatename.html
{% extends "base.html" %}
{% block content %}
Content from the app template to replace other content
{% endblock content %}
See the docs for more info on template inheritance.