Home/ Questions/Q 7787903
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:49:14+00:00

I have some problems with making Javascript work with Django template inheritance. According to

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0