ジャンゴ：ベース

からjQueryのCDNを拡張し、私はちょうどbase.htmlにCDNからjQueryのを含めることによって、それはジャンゴ：ベース

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

を繰り返すことなく、静的ファイルからを含めたときのように、ベースを拡張するすべてのHTMLページで定義されることを考えました

base.html：

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>notifyMe</title> 

<!-- Bootstrap --> 

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<link href="/static/css/style.css" rel="stylesheet"> 
</head> 
<body> 
<h1>NotifyMe</h1> 
{% block main %} 
{% endblock %} 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</body> 
</html>

編集 event_add.html：

{% extends 'base.html' %} 
{% load widget_tweaks %} 
{% block main %} 
<div class="container"> 
    <div id="form" class="col-md-6 col-md-offset-3 jumbotron"> 
     <div class="text-center"> 
      <h3>New Task</h3> 
     </div> 
     <form method="POST"> 
      {% csrf_token %} 
      {% for field in form.visible_fields %} 
      <div class="form-group row"> 
       <label for="{{ field.id_for_label }}">{{ field.label }}</label> 
       {{field|add_class:'form-control'}} 
       {% for error in field.errors %} 
       <span class="help-block"> {{ error}} </span> 
       {% endfor %} 
      </div> 
      {% endfor %} 
      <div class="form-group"> 
       <button type="submit" class="btn btn-success"> 
       <span class="glyphicon glyphicon-ok"></span> Save 
       </button> 
       <a href="" class="btn btn-default">Cancel</a> 
      </div> 
     </form> 
    </div> 
</div> 
<script> 
$(function() { 
      $(".datepicker").datepicker({ 
         changeMonth: true, 
         changeYear: true, 
         yearRange: "2016:2020", 
             }); 
        }); 
</script> 
{% endblock %}

機能スクリプトの前にCDN行を追加するまで、私の機能が認識されませんでした。

{% extends 'base.html' %}にはいくつかの制限がありますか？

出典

2016-11-29 Imane E.

いいえ、それはしていません。どのような問題がありますか？ – pythad

私は 'Uncaught TypeError：$（...）.datepickerは関数ではありません.'としばらく苦労しています。最後にjQueryを含めて最後に試したことがありました。違いが何かを理解したいと思っていて、CDNを使って作業しているときに自分自身を繰り返さないというトリックがあるならば。 –

'base.html'ファイルに' script'タグを含めていますか？あなたの質問にあなたのファイルの関連部分を追加し、あなたが持っている問題を記述してください - あなたは拡張ページでjQueryを実行できません。ブラウザのコンソールでエラーメッセージがないか確認してください。 – Tony

使用しようとしている.datepicker()プラグインがJquery-UIに含まれています。

base.html

<html lang="en"> 
    ... 
    ... 
    {% block main %} 
    {% endblock %} 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Consider also adding Bootstrap.js here! --> 
    {% block extra_js %}{% endblock extra_js %} 
    </body> 
</html>

とHTMLコンテンツのmainブロックとJavascriptのためextra_jsブロックを使用します。私は（明確にするため取り除か関係ない部分）を次のように、あなたのテンプレートを再構築することをお勧めします。このようにして、JQueryの後にユーザースクリプトがあることを保証します。たとえば：

event_add.html

{% extends 'base.html' %} 
{% load widget_tweaks %} 
{% block main %} 
<div class="container"> 
... 
... 
</div> 
{% endblock main %} 

{% block extra_js %} 
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></scrip‌t> 
<script> 
$(function() { 
    ... 
    ... 
</script> 
{% endblock extra_js %}

出典

2016-11-30 01:54:30 Selcuk

答えて

関連する問題