jquery ui Dialog: cannot call methods on dialog prior to initialization

Question

I have an app on jquery 1.5 with dialogs worked fine. While I have a lot of .live handlers, I changed this to .on. For that, I have to update jquery (now 1.8.3 an jquerui 1.9.1).

Now, I got: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Following is the code:

Javascript

var opt = {         autoOpen: false,         modal: true,         width: 550,         height:650,         title: 'Details' };  $(document).ready(function() { $("#divDialog").dialog(opt);     $("#divDialog").dialog("open"); ...     

html code

<div id="divDialog"> <div id="divInDialog"></div> </div> 

Any idea why this might be happening?

Answer 1

Try this instead

$(document).ready(function() {   $("#divDialog").dialog(opt).dialog("open"); }); 

You can also do:

var theDialog = $("#divDialog").dialog(opt); theDialog.dialog("open"); 

That's because the dialog is not stored in $('#divDialog'), but on a new div that is created on the fly and returned by the .dialog(opt) function.