2012-04-13 8 views
0

Ich habe einige Probleme mit der Erstellung von Javascript mit Django Vorlage Vererbung. Laut Opera laden alle Javascripts und ihre CSS-Dateien gut, aber Javascript funktioniert nicht anstelle von Javasrcript-Tabellen, es werden normale HTML-Tabellen angezeigt. Wenn ich alle Vererbungstags vom Kind lösche, funktioniert alles gut.Javascript Doesen nicht mit Django Vorlage Vererbung

Ich habe Dreamweaver verwendet, um diese Dateien zu erstellen, aber ich bezweifle, dass dies wirklich Auswirkungen auf dieses Problem hat.

Eltern - 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> 

Kinderkopf:

{% 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> 

Es scheint, dass dies nichts gehabt hatte, mit dem Kopf zu tun. Dreamweaver erzeugt das Skript am Ende des 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> 

, die ich nicht in den Inhaltsblock aufzunehmen - es hat mich einen halben Tag um dies herauszufinden; p.

Vielen Dank für Ihre Hilfe.

+0

Können Sie uns das _generated_ markup zeigen? –

+0

Sie sagen, die übergeordnete Datei ist base.html, aber das Kind erweitert base_new.html. Ist es so einfach wie ein Tippfehler? Wenn Sie Beispiele in SO- und Frageforen veröffentlichen, nehmen Sie so viel wie möglich heraus und lassen nur das Minimum zurück, das das Problem aufzeigt. Es ist wahrscheinlicher, dass wir es dann ausschneiden und das Problem ist leichter zu erkennen. – Spacedman

Antwort

2

Wenn Sie eine Vorlage erweitern, müssen Sie die Blöcke definieren, die in der übergeordneten Vorlage überschrieben werden. Die untergeordnete Vorlage, die Sie gepostet haben, hat Markup, das nicht in {% block%} Vorlagentags enthalten ist.

Wenn Sie die gesamte Struktur des Dokuments ändern möchten, ist keine Template-Vererbung erforderlich.

Für weitere Informationen über Vorlage Vererbung: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance

auch einige Leute aus anderen Frameworks kommen/Sprachen inclusion als primärer Mechanismus der Wiederverwendung verwendet werden. Vielleicht möchten Sie sehen, ob das Ihren Bedürfnissen besser entspricht.

Edit: Ich ging voran und bearbeitet Ihre Vorlagen, so dass sie die entsprechenden Blöcke haben.

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> 
2

Sie haben nicht verstanden, wie Template-Vererbung funktioniert. In der untergeordneten Vorlage darf sich nichts außerhalb von Block-Tags befinden. (All das Doctype/Header-Zeug hat sowieso keinen Platz.)

Aber um einen Block in einer untergeordneten Vorlage anzuzeigen, muss es im übergeordneten definiert werden. Sie haben den CSS-Block nicht definiert, er wird einfach ignoriert.

+0

Entschuldigung, es war am Ende, aber ich habe es gelöscht, als ich versucht habe, es in mehrere Blöcke zu teilen und vergaß, es zurückzustellen, nachdem das nicht funktioniert hat. Ich lege es jetzt zurück. – Qwyt