django admin jQueryUI dialog

问题

Well, I have a django admin site project and I want to add a simple dialog on one of my change_form template.

I add the following code:

Open button that will open the dialog:

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

The dialog initialization code:

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

The dialog itself:

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

When I click the 'Open' button, nothing happened but with one error:

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

I did some research and found out this may due to many reasons.

One of the most common one is that I may include Jquery twice somewhere. However, I don't think I did it. I only declare that I am using 'django.jQuery' in 'script' tag.

Does any one know what may be the reason in my case?

Thanks in advance.

EDIT: For update,

I try to include 'jquery-ui', then I got 'Uncaught ReferenceError: jQuery is not defined'

Then I try to include jquery (which I think I should not do it twice, since I have used (django.jQuery).) And I got the same error that "Uncaught TypeError: Object # has no method 'dialog' "

回答1:

Try this:

Replace

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

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

and

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

Also, make sure you have included jquery-ui source in the template

回答2:

I had a similar problem and in my case, the issue was different.

The order of JS was different (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.

I was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

回答3:

Using Django 2.0.2 the following solved the problem (thank you, mrts, for sorting it out):

Download jQuery UI
Copy files jquery-ui.{structure}.min.{css,js}, jquery-ui.theme.min.css and folder images to /static/jquery-ui (or any other static directory)
Open jquery-ui.min.js and add the following line at the beginning of the file:

jQuery = jQuery || django.jQuery.noConflict(false);
Add js and css files to your ModelAdmin Meta class:

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

The cause of the problem was that jquery-ui.min.js did not know, how jQuery is accessible in Django. By explicitly defining jQuery variable, the proplem was solved.

回答4:

The below worked for me:

1) Download latest stable release of jQuery UI Download jQuery UI 1.12.1

2) Copy above file into static assets dir and replace the following line

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

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

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

with:

(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) In your ModelAdmin class add media files:

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

来源：https://stackoverflow.com/questions/16717835/django-admin-jqueryui-dialog

标签

django

django-admin

jquery-ui-dialog