django admin jQueryUI对话框

时间:2013-05-23 15:21:50

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

好吧,我有一个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',然后我得到'未捕获的ReferenceError:jQuery未定义'

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

4 个答案:

答案 0 :(得分:1)

试试这个:

替换

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

答案 1 :(得分:1)

使用Django 2.0.2,以下解决了该问题(感谢mrts,以解决该问题):

  • Download jQuery UI
  • 将文件SCNNode *node = [SCNNode nodeWithMDLObject:myModelObj]; .separator *.line{ -fx-border-style: solid; -fx-padding: 0 -50 0 0; } 和文件夹jquery-ui.{structure}.min.{css,js}复制到jquery-ui.theme.min.css(或任何其他images目录)
  • 打开/static/jquery-ui,并在文件开头添加以下行:

    static

  • jquery-ui.min.jsjQuery = 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',
            )
        }
不知道如何在Django中访问jQuery。通过显式定义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', ) } 变量,可以解决问题。

答案 2 :(得分:0)

我有类似的问题,在我的情况下,问题不同。

JS的顺序是不同的(我知道这是你检查的第一件事,但我几乎可以肯定,事实并非如此,但确实如此)。在调用jqueryUI库之前调用了调用该对话框的js。

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

答案 3 :(得分:0)

以下内容对我有用:

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',  
    )