Лучшая практика для включения пользовательского javascript в Django?

Все еще новый для Django. Я пытаюсь включить виджет календаря в вход date, как показано в этом tutorial. Следующий test.html работает отлично:Лучшая практика для включения пользовательского javascript в Django?

{% extends "base_alt_simple.html" %} # note this has {% load static %} 

{% block title %}Schedule{% endblock %} 

{% block main_content %} 

<div class="container"> 

    <h3>Building name</h3> 

</div> 

<div class="container"> 
<div class="bootstrap-iso"> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <form method="post"> 
    <div class="form-group "> 
     <label class="control-label " for="date"> 
     Date 
     </label> 
     <div class="input-group"> 
     <div class="input-group-addon"> 
     <i class="fa fa-calendar"> 
     </i> 
     </div> 
     <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div> 
     <button class="btn btn-primary " name="submit" type="submit"> 
     Submit 
     </button> 
     </div> 
    </div> 
    </form> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
<script> 
    $(document).ready(function(){ 
     var date_input=$('input[name="date"]'); //our date input has the name "date" 
     var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
     date_input.datepicker({ 
      format: 'mm/dd/yyyy', 
      container: container, 
      todayHighlight: true, 
      autoclose: true, 
     }) 
    }) 
</script>

Но, если я хотел бы сохранить JavaScript в течение custom.js, как бы я загрузить это?

Используя начальные ответы, которые я использую:

<script src="{% static 'custom.js' %}"></script>

Но календарь Выдвижной не больше работы. Я явно что-то недопонимаю здесь о том, как использовать функциональность custom.js. Спасибо за любой совет.

Также base_alt_simple.html:

{% load staticfiles %} 

<!DOCTYPE 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"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>{% block title %}Home{% endblock title %}</title> 

    <!-- Bootstrap core CSS --> 
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="{% static 'css/grayscale.min.css' %}" rel="stylesheet"> 
    <link href="{% static 'css/custom.css' %}" rel="stylesheet"> 

    <!-- favicon --> 
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"> 



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 

<!-- Static navbar --> 
<nav class="navbar navbar-default navbar-static-top" style="background-color: #FFFFFF;"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand page-scroll" href="{% url 'index' %}"> 
     <img id="logo" src="{% static 'images/Logo1.png' %}"> 
     </a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <!-- <ul class="nav navbar-nav navbar-right"> --> 
     <form method='GET' action='' class="nav navbar-nav navbar-right"> 
     <input type='text' name='q' placeholder='Search apartments' value='{{ request.GET.q }}'/> 
     <input type='submit' value='Search' /> 
     </form> 
     <!-- <li><a href="#">User <span class="glyphicon glyphicon-user" id="logIcon"></span></a></li> --> 
     <!-- <li><a href="#"> <span class="glyphicon glyphicon-home" id="logIcon"></span></a></li> --> 
     <!-- </ul> --> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

{% block main_content %} 

{% endblock %} 


    <!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="{% static 'bootstrap.min.js' %}"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="{% static 'ie10-viewport-bug-workaround.js' %}"></script> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

<!-- Include jQuery --> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 

<!-- Bootstrap Date-Picker Plugin --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 





</body> 



</html>

EDIT добавлен полный ток test.html

{% extends "base_alt_simple.html" %} 
{% load static %} 

{% block title %}Schedule{% endblock %} 

{% block main_content %} 

<div class="container"> 

    <h3>Building name</h3> 

</div> 

<div class="container"> 

    <div class="jumbotron"> 
    <h4>Find a time to visit </h4> 

    <div class="container"> 
    <div class="row"> 


    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <form method="post"> 
    <div class="form-group "> 
     <label class="control-label " for="date"> 
     Date 
     </label> 
     <div class="input-group"> 
     <div class="input-group-addon"> 
     <i class="fa fa-calendar"> 
     </i> 
     </div> 
     <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div> 
     <button class="btn btn-primary " name="submit" type="submit"> 
     Submit 
     </button> 
     </div> 
    </div> 
    </form> 
    </div> 

    </div> <!-- row --> 
    </div> <!-- /container --> 

    </div> <!-- end jumbotron --> 

</div> <!-- end container --> 


{% endblock main_content %} 


{% block scripts %} 

<script src="{% static 'js/custom.js' %}"></script> 

{% endblock scripts %}

источник

2016-10-27 Jebediah15

Вы должны использовать статические файлы, выполните действия, описанные в this django doc ,

Допустит, вы разместили свой yourscript.js в вашем Джанго каталоге приложения your_app/static/yourscript.js, все, что вам нужно сделать, это следующее:

{% load static %} 
<script src="{% static 'yourscript.js' %}"></script>

Надеется, что это помогает!

UPDATE:

Убедитесь custom.js помещают после начальной загрузки и DatePicker, так что вы могли бы поставить

<script src="{% static 'custom.js' %}"></script>

перед </body> в base_alt_simple.html. Или, если вы не хотите, чтобы положить его туда, можно определить блок сценариев:

{% block scripts %} 

{% endblock %}

снова прямо перед </body> в base_alt_simple.html и в test.html:

{% load static %} 
{% block scripts %} 
<script src="{% static 'custom.js' %}"></script> 
{% endblock %}

Кроме того, не забывайте место custom.js в your_app/static/custom.js и перезагрузить сервер.

источник

2016-10-27 19:55:02 damores

У меня есть тег загрузки в базовом шаблоне. И затем я изменил сценарий, чтобы он выглядел как ваш. Однако всплывающее окно календаря работает только тогда, когда у меня есть скрипт js в шаблоне. Что я не делаю, чтобы потянуть это через команду сценария? – Jebediah15

Можно ли увидеть ваш base_alt_simple.html? – damores

только что добавил полный базовый шаблон – Jebediah15

Django загружает статические файлы в шаблоны совершенно по-другому. Сначала вы должны установить свой каталог static, и они загружают ваши статические файлы там, используя специальный шаблон tempatetag от Django. Если у вас есть код JS в yourscript.js, в шаблоне вы могли бы сделать следующее:

{% load static %} 

<script src="{% static 'relative/path/from/static/dir/yourscript.js' %}"></script>

Джанго собирают статические файлы static каталога.Чтобы получить дополнительную информацию о том, как настроить статический каталог в вашем проекте, читайте the official Django doc on static files.

источник

2016-10-27 19:58:02

Лучшая практика для включения пользовательского javascript в Django?

ответ

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