Javascript doesen't work with Django template inheritance

Question

I have some problems with making Javascript work with Django template inheritance. According to Opera all javascripts and their CSS files load fine, but Javascript doesn't work instead of Javasrcript tables ordinary html tables are displayed. If I remove all the inheritance tags from the child everything works fine.

I have been using Dreamweaver to make these files, but I doubt whether that has any real effect on this problem.

Parent - base.html header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="/SpryAssets/css/base_new.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<style type="text/css">
.item_table_main {  border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>
</head>

<body>

Child's header:

{% extends "base_new.html" %}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    {% block css %}
body table tr {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFF;
    border: 0px none #FFF;
}
</style>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:382px;
    height:252px;
    z-index:1;
    left: 1169px;
    top: 616px;
}
#apDiv2 {
    position:absolute;
    width:1575px;
    height:138px;
    z-index:2;
}
    {% endblock css %}
</style>
</head>

It seems that this hadn't had anything to do with the header. Dreamweaver generated this script at the end of the child.html

<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var CollapsiblePanel9 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel9", {contentIsOpen:false});
var CollapsiblePanel8 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel8", {contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", 
</script>

which I failed to include into the content block - it took me half a day to figure this out ;p.

Thank for your help everybody.

You say the parent file is base.html but the child extends base_new.html. Is it as simple as a typo? Also, when posting examples to SO and question forums, take out as much as possible leaving only the minimum that demonstrates the problem. We're more likely to cut n paste it then, and the problem is easier to spot. — Spacedman
– Spacedman, Commented Apr 13, 2012 at 18:34

Jason Keene · Accepted Answer · 2012-04-13 17:36:42Z

If you are extending a template you will need to define the blocks that it will override in the parent template. The child template you posted has markup that isn't contained within {% block %} templatetags.

If you want to change the entire structure of the document, template inheritance isn't necessary.

For more info on template inheritance: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance

Also, some people coming from other frameworks/languages are used to inclusion as the primary mechanism of reuse. You might want to see if that fits your needs better.

Edit: I went ahead and edited your templates so they have the appropriate blocks.

base.html

{% block doctype %}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">{% endblock %}
<html>

{% block head %}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="/SpryAssets/css/base_new.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<style type="text/css">
.item_table_main {  border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>
</head>
{% endblock %}

<body>

{% block content %}

    {# base content here #}

{% endblock %}

</body>
</html>

child.html

{% extends "base.html" %}

{% block doctype %}<!DOCTYPE HTML>{% endblock %}

{% block head %}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    {% block css %}
body table tr {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFF;
    border: 0px none #FFF;
}
</style>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:382px;
    height:252px;
    z-index:1;
    left: 1169px;
    top: 616px;
}
#apDiv2 {
    position:absolute;
    width:1575px;
    height:138px;
    z-index:2;
}
    {% endblock css %}
</style>
</head>

{% endblock %}

{% block content %}

    {# child content here #}

{% endblock %}

</body>
</html>

Daniel Roseman · Accepted Answer · 2012-04-13 17:32:48Z

2

You haven't understood how template inheritance works. In the child template, nothing must be outside block tags. (All that doctype/header stuff has no place there anyway.)

But in order to display a block in a child template, it needs to be defined in the parent. You haven't defined the CSS block, so it's simply ignored.

answered Apr 13, 2012 at 17:32

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

1 Comment

Qwyt Over a year ago

Sorry, it was at the bottom, but I deleted it when I tried to split it into multiple blocks and forgot to put it back after that didn't work. I put it back now.

Shawemra_Lvr · Accepted Answer · 2022-06-12 01:45:06Z

0

What you might need to do is to use

<script src="{% static '/app/js/index.js' %}"></script>

instead of

<script src="static/app/js/index.js"></script>

in your base template.

answered Jun 12, 2022 at 1:45

Shawemra_Lvr

251 silver badge7 bronze badges

Collectives™ on Stack Overflow

Javascript doesen't work with Django template inheritance

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related