django 管理 jQueryUI 对话框

Question

嗯，我有一个 django 管理站点项目，我想在我的一个 Change_form 模板上添加一个简单的对话框。

我添加以下代码:

打开按钮将打开对话框:

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

当我单击“打开”按钮时，没有发生任何事情，但出现一个错误:

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

我做了一些研究，发现这可能是由于多种原因造成的。

最常见的一个是我可能在某个地方包含两次 Jquery。 然而，我不认为我做到了。我只声明我在“script”标签中使用“django.jQuery”。

有人知道我的情况可能是什么原因吗？

提前致谢。

编辑:更新，

我尝试包含“jquery-ui”，然后得到“Uncaught ReferenceError:jQuery 未定义”

然后我尝试包含jquery(我认为我不应该这样做两次，因为我已经使用了(django.jQuery)。)并且我得到了相同的错误“Uncaught TypeError:Object # has no method 'dialog' ”

Answer 1

使用 Django 2.0.2 解决了以下问题(感谢 mrts 的整理):

• Download jQuery UI
• 复制文件 jquery-ui.{struct}.min.{css,js}、jquery-ui.theme.min.css 和文件夹 images 到 /static/jquery-ui (或任何其他 static 目录)

• 打开 jquery-ui.min.js 并在文件开头添加以下行:

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

• 将 js 和 css 文件添加到您的 ModelAdmin Meta 类:

类 MyAdmin(admin.ModelAdmin):

    类媒体:
        js = (
            'jquery-ui/jquery-ui.min.js',
        )
        CSS = {
            '全部': (
                'jquery-ui/jquery-ui.min.css',
                'jquery-ui/jquery-ui.struct.min.css',
                'jquery-ui/jquery-ui.theme.min.css',
            )
        }

问题的原因是 jquery-ui.min.js 不知道如何在 Django 中访问 jQuery。通过显式定义jQuery变量，问题得到了解决。