django admin jQueryUI对话框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django admin jQueryUI对话框相关的知识,希望对你有一定的参考价值。
好吧,我有一个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 #now method'对话框'”
试试这个:
更换
<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
源
使用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
不知道如何在Django中访问jQuery。通过明确定义jQuery
变量,解决了问题。
我有类似的问题,在我的情况下,问题是不同的。
JS的顺序是不同的(我知道这是你检查的第一件事,但我几乎可以肯定,事实并非如此,但确实如此)。在调用jqueryUI库之前调用调用该对话框的js。
我继承了一个模板并使用{{super.block}}继承了块中的代码以及模板。我不得不在块的末尾移动{{super.block}}来解决问题。调用对话框的js在Django的admin.py中的Media类中声明。我花了一个多小时来搞清楚。希望这有助于某人。
以下对我有用:
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',
)
以上是关于django admin jQueryUI对话框的主要内容,如果未能解决你的问题,请参考以下文章