Джанго: Продлить JQuery CDN от основания

Я думал, что только в том числе JQuery из CDN в base.html, она будет определена во всех HTML-страниц, которые расширяют базу, как при включении от статических файлов, не повторяяДжанго: Продлить JQuery CDN от основания

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

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'? Добавьте соответствующие части вашего файла в свой вопрос и опишите проблему, которую вы имеете - I _assume_, вы не можете запускать 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>

и использовать main блок для контента HTML и extra_js блока для JavaScript. Таким образом, вы гарантируете, что после 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

Джанго: Продлить JQuery CDN от основания

ответ

Смежные вопросы