django admin jQueryUI dialog

Question

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

Answer 1

Try this:

Replace

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

to

<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