I have a base.html and an index.html that extends base.html and fills out a {% block content %}{% endblock %}. However, for some reason, the javascript that I have in the block that deals with initiating a Google Map doesn't create the map - the page is blank. Without extending the base.html (i.e. just by typing everything in base.html out in index.html explicitly), the map works fine. The code:
base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href='{% static "mh_app/style.css" %}' />
</head>
<body>
<header id="header">
<div class="header-cont">
<h1>
Title
</h1>
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
Download
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</header>
{% block content %}{% endblock %}
</body>
</html>
index.html
{% block content %}
<div id='map'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.3499047, lng: -100.0770253},
zoom: 4
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<my_api_key>&callback=initMap" async defer></script>
{% endblock %}
I've tried sticking some console.log statements inside initMap(), and they run just fine, so I have no idea why the map is not appearing.
EDIT
style.css
#map {
height: 90%;
width: 100%;
}
Do you have styles for the map div ?
Add height and width for the map div, try changing <div id="map"></div> to something like <div id="map" style="width: 500px; height: 500px;"></div>
Related
I need to know how to activate font-weight on the page (I'm using JavaScript).
Example: If I'm on the teachers page, the <a> Teachers </a> font-weight should be bold like shown in image below.
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title>Private Classes</title>
{% endblock %}
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<div class="links">
Teachers
Students
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>
You are on teachers page and 'active' class is already there so no need to use javascript for it.
Simply adding font weight to the 'active' class is enough.
<style>
.active{
font-weight: bold;
}
</style>
const currentPage = location.pathname
const menuItems = document.querySelectorAll("header .links a")
for (item of menuItems) {
if (currentPage.includes(item.getAttribute("href"))) {
item.classList.add("active")
}
}
I have a Django template that contains some Django templating blocks. I have another template that contains some JavaScript that does an Ajax request to pull this Django template in. It looks something like this:
$.ajax({
url: '/page/',
method: 'GET',
success: function (data) {
console.log($(data).find(".wrapper"));
}
});
/page.html/ contains the following:
{% extends 'core/base.html' %}
{% block content %}
<div class="example">
..some..content..
</div>
{% endblock %}
page.html extends base.html which has a wrapper <div class="wrapper"></div> however, when I run the Ajax code, the console does not find the wrapper class. Is there a way to get the full template page?
Example of raw data to console output
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/core/patterns.css?1587877907" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="jumbotron jumbotron-gray">
<article class="post" data-key="294" data-slug="example">
<div class="post__details">Example</div>
</article>
</div>
</div>
<script src="/static/core/base.js?1587877907"></script>
</body>
</html>
I added a django-leaflet map to display place markers. I couldn't display the markers as click events and send these to postgres/postgis database. I used django-leaflet forms to input the data. I wonder how I could display the place markers as well as send these to the backend along with other model fields.
{% load static %}
{% include 'base.html' %}
{% load leaflet_tags %}
<style>
.leaflet-container { /* all maps */
width: 1400px;
height: 800px;
align-content: right;
}
</style>
<html>
<head>
{% leaflet_js plugins="forms" %}
{% leaflet_css plugins="forms" %}
</head>
<body>
{% leaflet_map "map" callback="window.map_init_basic" %}
<h2>Edit Apartment ID {{ Apartment.apt_id }}</h2>
<h2>Edit Apartment Location {{ Apartment.location }}</h2>
<form action="POST">
{{ form }}
<input type="submit"/>
</form>
</body>
</html>
<script type="text/javascript">
window.addEventListener("map:init", function (e) {
var detail = e.detail;
L.marker([38.7578, 8.9806]).addTo(detail.map);
}, false);
</script>
I have an issue. I could not trigger the onclick event on the link using Django and Python. I am providing my code below.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var query='';
function pageTransition(){
var full_url = window.location.search;
var url = full_url.replace("?", '');
query=url.file;
console.log('query',query);
var url="'"+query+"'";
$.getScript(url,function(){
$('a').velocity("scroll", { duration: 1000 });
})
}
</script>
</head>
<body>
<header>
<h1>Nuclear Reactor</h1>
{% if count > 0 %}
<b>Hi, {{ user.username }}</b>
Home
View Reactor status
logout
{% else %}
login / signup
{% endif %}
<hr>
</header>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
home.html:
{% extends 'base.html' %}
{% block content %}
<center><h1>Welcome</h1>
<p>This App allow to control the life cycle of the Nuclear Reactor and Retrive the status report </p>
<p>Status reportControl panel</p>
</center>
{% endblock %}
total html generated output after click on home link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var query='';
function pageTransition(){
var full_url = window.location.search;
var url = full_url.replace("?", '');
query=url.file;
console.log('query',query);
var url="'"+query+"'";
$.getScript(url,function(){
$('a').velocity("scroll", { duration: 1000 });
})
}
</script>
</head>
<body>
<header>
<h1>Nuclear Reactor</h1>
<b>Hi, </b>
Home
View Reactor status
logout
<hr>
</header>
<main>
<center><h1>Welcome</h1>
<p>This App allow to control the life cycle of the Nuclear Reactor and Retrive the status report </p>
<p>Status reportControl panel</p>
</center>
</main>
</body>
</html>
Here I need to get that query string value and include it inside that JavaScript function but the JavaScript function is not called at all.
I have a javascript file in an outside folder under static. My index.html is not running the javascript function that was imported from base.html.
File path:
-- project
-- app
-- templates
-- app name
-- index.html
-- src
-- static
-- hello_world.js
-- templates
-- base.html
View page source from browser
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script type='text/javascript' src="/static/hello_world.js"></script>
</head>
<body>
<div id="navigation">
<table border=0 cellpadding=7>
<tr>
<td>Home</td>
<td>Register</td>
<td>Login</td>
</tr>
</table>
</div>
<div id="content">
<h2> Welcome to WAM's board 2 player board games! </h2>
<canvas onload="entryPoint();" id="myCanvas" width="578" height="200"></canvas>
</div>
</body>
</html>
Base.html
{% block doctype %}<!DOCTYPE HTML> {% endblock %}
<html>
{% block head %}
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
{% load staticfiles %}
<script type='text/javascript' src="{% static "hello_world.js" %}"></script>
</head>
{% endblock %}
<body>
{% block navbar %}
<div id="navigation">
<table border=0 cellpadding=7>
<tr>
<td>Home</td>
{% if user_logged_in %}
<td>Upload</td>
<td>Challenge User</td>
<td>Logout of {{ user_name }}</td>
{% else %}
<td>Register</td>
<td>Login</td>
{% endif %}
</tr>
</table>
</div>
{% endblock %}
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
index.html
{% extends "base.html" %}
{% block navbar %}{{ block.super }}{% endblock %}
{% block content %}
<h2> Welcome to WAM's board 2 player board games! </h2>
<canvas onload="entryPoint();" id="myCanvas" width="578" height="200"></canvas>
{% endblock %}
Put this
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__)) # already present in newest django versions
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
in your settings.py, or simply put your static files inside static folders inside app folders