2

さて、django 管理サイト プロジェクトがあり、change_form テンプレートの 1 つに簡単なダイアログを追加したいと考えています。

次のコードを追加します。

ダイアログを開く [開く] ボタン:

<button id='open_dialog' onclick='javascript:$( "#comfirm_dialog" ).dialog("open");'>open</button>

ダイアログの初期化コード:

<script>
(function($){
$( "#comfirm_dialog" ).dialog({
    autoOpen: false,
    height: 450,
    width: 550,
    modal: true,
    buttons: {
        "Add": function(){},
        Cancel: function() {$( this ).dialog( "close" );}
    },
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
});
})(django.jQuery)

</script>

ダイアログ自体:

<div id='comfirm_dialog' title='Comfirmation'>
    This is a dialog.
</div>

「開く」ボタンをクリックしても、何も起こりませんでしたが、1 つのエラーが発生しました。

"Uncaught TypeError: Object #<Object> has no method 'dialog' "

私はいくつかの調査を行い、これには多くの理由がある可能性があることがわかりました.

最も一般的な問題の 1 つは、どこかに Jquery を 2 回含める可能性があることです。しかし、私はそれをやったとは思わない。「script」タグで「django.jQuery」を使用していることのみを宣言します。

私の場合、何が理由なのか知っている人はいますか?

前もって感謝します。

編集:更新のために、

「jquery-ui」を含めようとすると、「Uncaught ReferenceError: jQuery is not defined」が表示されます

次に、jquery をインクルードしようとします ((django.jQuery) を使用したため、2 回行うべきではないと思います)。「Uncaught TypeError: Object # has no method 'dialog'」という同じエラーが発生しました。

4

4 に答える 4

2

Django 2.0.2 を使用すると、次のようにして問題が解決しました (解決してくれたmrts さんに感謝します)。

  • jQuery UI をダウンロード
  • filesと folderを(または他のディレクトリ)にコピーしますjquery-ui.{structure}.min.{css,js}jquery-ui.theme.min.cssimages/static/jquery-uistatic
  • ファイルを開いjquery-ui.min.jsて、ファイルの先頭に次の行を追加します。

    jQuery = jQuery || django.jQuery.noConflict(false);

  • jscssファイルをModelAdmin Metaクラスに追加します。

class MyAdmin(admin.ModelAdmin):

    class Media:
        js = (
            'jquery-ui/jquery-ui.min.js',
        )
        css = {
            'all': (
                'jquery-ui/jquery-ui.min.css',
                'jquery-ui/jquery-ui.structure.min.css',
                'jquery-ui/jquery-ui.theme.min.css',
            )
        }

問題の原因は、jquery-ui.min.jsDjango で jQuery にアクセスする方法を知らなかったことです。変数を明示的に定義することjQueryで、問題は解決しました。

于 2018-09-05T20:04:45.280 に答える