1. ホーム
  2. 質問と答え
  3. カスタムJavascriptをDjangoに組み込むためのベストプラクティス？

カスタムJavascriptをDjangoに組み込むためのベストプラクティス？

2016-10-27 8 views
0

まだDjangoには初めてです。このtutorialに示すように、入力欄にdateのカレンダーウィジェットを組み込もうとしています。私はどのように私はこれをロードし、custom.jsでJavaScriptを維持したい場合は、カスタム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>

しかし：正常に動作しますtest.htmlという、次の？

<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は はthis django docの手順に従ってください、あなたは静的ファイルを使用する必要があり、完全な現在の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

答えて

0

を追加しました。

は、あなたがしなければならないすべては以下の通りです、あなたはDjangoアプリケーションディレクトリyour_app/static/yourscript.jsであなたのyourscript.jsを置い言う：

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

は、この情報がお役に立てば幸い！

UPDATE：

custom.jsがブートストラップとDatePickerの後を配置していることを確認しますので、あなたは右base_alt_simple.htmlで</body>前

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

を置くことができます。右base_alt_simple.htmlで</body>前とtest.htmlに

が 
{% block scripts %} 

{% endblock %}

が再び：

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

+0

を参照してください。基本テンプレートにロードタグがあります。そして、私はあなたのように見えるようにスクリプトを変更しました。ただし、カレンダーのポップアウトはテンプレートにjsスクリプトがある場合にのみ機能します。スクリプトコマンドでそれを引き出すのはどうしたらいいですか？ – Jebediah15

+0

あなたのbase_alt_simple.htmlを見ることは可能でしょうか？ – damores

+0

ちょうどフルベースのテンプレートを追加しました – Jebediah15

0

Djangoは静的ファイルをテンプレートに読み込む方法がまったく異なります。最初にstaticディレクトリを設定し、そこからDjangoの特別なtemplatetagを使って静的ファイルをロードしてください。あなたのテンプレートで、yourscript.jsであなたのJSコードをお持ちの場合は、次の操作を行います。

{% load static %} 

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

Djangoはstaticディレクトリに静的ファイルを収集します。プロジェクト内の静的ディレクトリを設定する方法の詳細については、the official Django doc on static files.

出典

2016-10-27 19:58:02

関連する問題

 関連する問題