django 管理 jQueryUI 对话框答案

【问题标题】：django admin jQueryUI dialogdjango 管理 jQueryUI 对话框
【发布时间】：2013-05-19 01:02:46
【问题描述】：

好吧，我有一个 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 is not defined'

然后我尝试包含 jquery（我认为我不应该这样做两次，因为我使用过 (django.jQuery)。）我得到了同样的错误“未捕获的类型错误：对象 # 没有方法‘对话框’ "

【问题讨论】：

您是否在文件中包含了 jquery 和 jquery-ui 的参考资料？
个人？不，我认为 django 会为我做这件事。我不会在任何地方包含 jquery 或 jquery-ui
django 不会为你做这件事。您应该在某些地方包含jquery，否则错误将是$ 未定义。现在，确保 jquery-ui 也在那里
但是，我已经指定了（django.jQuery）。我认为应该包括 Jquery 对吗？

标签： django django-admin jquery-ui-dialog

【解决方案1】：

使用 Django 2.0.2 解决了以下问题（感谢mrts 整理）：

Download jQuery UI
将文件jquery-ui.{structure}.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 类中：

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.js 不知道 jQuery 是如何在 Django 中访问的。通过显式定义jQuery变量，问题就解决了。

【讨论】：

【解决方案2】：

试试这个：

替换

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

到

<button id='open_dialog'>open</button>

和

$(function(){
    $('#open_dialog').click(function(){
        $("#comfirm_dialog").dialog('open'); 
    });
})

另外，请确保您已在模板中包含 jquery-ui 源

【讨论】：

实际上，我正在使用您的方法。我的意思是“.click”方法。我改为 onclick 是因为我想让代码更简单。顺便说一句，这两种方式都不起作用。
ok.. 当你做一个查看源代码的时候，你看到jquery-ui的js库了吗？
唯一的事情是我尝试在我的模板中包含 jquery-ui：
哦..这很奇怪。你应该早点得到那个。无论如何，也包括 jquery 库。
是的，我做到了。然后我回到起点。 "Uncaught TypeError: Object #

【解决方案3】：

我遇到了类似的问题，但在我的情况下，问题有所不同。

JS 的顺序不同（我知道这是您检查的第一件事，但我几乎可以肯定情况并非如此，但确实如此）。调用对话框的js是在调用jqueryUI库之前调用的。

我正在继承一个模板并使用 {{super.block}} 将代码从块以及模板继承。我不得不在解决问题的块末尾移动 {{super.block}}。调用对话框的 js 是在 Django 的 admin.py 中的 Media 类中声明的。我花了一个多小时才弄清楚。希望这对某人有所帮助。

【讨论】：

【解决方案4】：

以下对我有用：

1) 下载最新稳定版 jQuery UI Download jQuery UI 1.12.1

2) 将上述文件复制到静态资产目录并替换以下行

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

    // AMD. Register as an anonymous module.
    define([ "jquery" ], factory );
} else {

    // Browser globals
    factory( jQuery ); <--- REPLACE HERE ----
}

与：

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

    // AMD. Register as an anonymous module.
    define([ "jquery" ], factory );
} else {

    // Browser globals
    factory( django.jQuery ); <--- REPLACE ----
}

3) 在您的 ModelAdmin 类中添加媒体文件：

    class Media:
    js = (
        'app/js/jquery_ui.js',
        'app/js/custom.js',  
    )

【讨论】：