2012-04-13 25 views
0

JavascriptをDjangoのテンプレート継承で使用する際にいくつか問題があります。 Operaによると、すべてのjavascriptとそのCSSファイルは正常に読み込まれますが、Javascriptのテーブルの代わりにJavascriptが機能しません。通常のhtmlテーブルが表示されます。すべての継承タグを子から取り除くと、すべて正常に動作します。JavascriptはDjangoのテンプレート継承で動作しません

私はこれらのファイルを作成するためにDreamweaverを使用していますが、それがこの問題にどのような影響を与えるかは疑問です。

親 - base.htmlヘッダー:

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

子供のヘッダ:

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

ヘッダを行うには何も持っていなかったようです。 P;それはこれを理解するために半日かかった - Dreamweaverは、私がコンテンツブロックに含めることができなかったの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> 

の終わりに、このスクリプトを生成しました。

皆様お世話になりました。

+0

_generated_マークアップを表示できますか? –

+0

親ファイルがbase.htmlだが子はbase_new.htmlを拡張しているとします。それはタイプミスのように簡単ですか?また、SOや質問フォーラムにサンプルを投稿するときは、可能な限り問題を示す最小限のものを残してください。私たちはそれをペーストしてしまう可能性が高くなり、問題は見つけやすくなります。 – Spacedman

答えて

2

テンプレートを拡張する場合は、親テンプレートで上書きするブロックを定義する必要があります。投稿した子テンプレートに{%block%} templatetagsに含まれていないマークアップがあります。

ドキュメントの構造全体を変更する場合は、テンプレートの継承は必要ありません。テンプレートの継承の詳細については

:またhttps://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance

は、他のフレームワーク/言語から来た何人かの人々は、再利用の主要なメカニズムとしてinclusionに使用されています。それがあなたのニーズに合っているかどうかを知りたいかもしれません。

編集:テンプレートを編集して適切なブロックを作成しました。

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

あなたは継承がどのように機能するかをテンプレートに理解していません。子テンプレートでは、ブロックタグの外側に何も置く必要はありません。

しかし、子テンプレートにブロックを表示するには、それを親に定義する必要があります。あなたはCSSブロックを定義していないので、単に無視されます。

+0

申し訳ありませんが、一番下にありましたが、複数のブロックに分割しようとしたときに削除してしまいました。私は今戻す。 – Qwyt

関連する問題