2016-07-26 34 views
8

dalの使用中に問題が発生し、簡単な例を作成しようとしました。django-autocomplete-lightチュートリアル:select2は関数エラーではありません

私はDjango autocomplete light: field not populatedとまったく同じことをしましたが、リンクの回答も適用しました。 I)は上記の答えとして(ちょうど同じHTMLのヘッダーに次のように追加した場合)

ステップ1:

<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" /> 
    <link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" /> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script> 

ブラウザインスペクタのエラーを

ここで私は通過した段階でありますコンソールはこのようなものです:

Uncaught ReferenceError: yl is not defined(anonymous function) @ autocomplete.init.js:75select2.js:117 
Uncaught ReferenceError: yl is not defined(anonymous function) @ select2.js:117 

ステップ2)だから私は、DALライブラリにjquery.jsおよびその他のjsファイルを追加しました:

<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" /> 
    <link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" /> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/jquery.init.js"></script> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/jquery.init.js"></script> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script> 
    <script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script> 

とエラーは次のように変更されました:

select2.js:66 Uncaught TypeError: $(...).select2 is not a function(anonymous function) @ select2.js:66dispatch @ jquery.js:4435elemData.handle @ jquery.js:4121trigger @ jquery.js:4350(anonymous function) @ jquery.js:4901each @ jquery.js:374each @ jquery.js:139trigger @ jquery.js:4900initialize @ autocomplete.init.js:45each @ jquery.js:374each @ jquery.js:139(anonymous function) @ autocomplete.init.js:50fire @ jquery.js:3099fireWith @ jquery.js:3211ready @ jquery.js:3417completed @ jquery.js:3433 

ステップ3)、そして最後のために、私はこれらの2つのプラグインを発見して、コメントを追加し、それが働きました!だからここ

Plugins of [Step 2)] + 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

が私の質問です:

A)私は上記のすべてのプラグインを追加する必要がありますか?たとえば、[ステップ3]のプラグインに2つのselect2.jsがあります。]私は混乱していて、別の方法で動作しているのだろうかと思っています(どちらか一方を削除しても機能しません)。

B)Django autocomplete light: field not populatedという質問によれば、ステップ2は機能しませんか?エラーが発生するのはなぜですか?

C)このサンプルコードでは、次のコードの一部がまったく動作していないようです。管理者アカウントでない場合、外部キーはテキストフィールドに表示されません。つまり、リストには何も見つかりません。私もdjango-autocomplete-light not working - select2 is not a functionをチェックし、インストールアプリが動作しませんでした並べ替え@

{% block footer %} 
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script> 
{{ form.media }} 
{% endblock %} 

dal tutorialから、それは管理外のオートコンプリートを使用する "ことができます)。

答えて

0

最初のselect2ライブラリファイルは存在しません。選択されたリンクを呼び出すHost Not Foundエラー

select2ライブラリは、最初にコメントした場合は同じですが、エラーは発生しません。ライブラリを静的フォルダにダウンロードすることができます。

また、最後の例のjquery linkはありません。 jqueryをダウンロードして静的フォルダに入れることができます。

1

まず、Jqueryを含める必要があります。その後、サードパーティライブラリの選択フィールドを追加する必要があります。

  • Select2.min.js(JSファイルの縮小さ版)
  • Select2.min.css(CSSファイルの縮小さ版)
  • そしてインポートautocomplete.js
関連する問題