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?

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

Solution 2

If you cannot upgrade jQuery and you are getting:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

You can work around it like so:

$(selector).closest('.ui-dialog-content').dialog('close');

Or if you control the view and know no other dialogs should be in use at all on the entire page, you could do:

$('.ui-dialog-content').dialog('close');

I would only recommend doing this if using closest causes a performance issue. There are likely other ways to work around it without doing a global close on all dialogs.

Solution 3

I got this error when I only updated the jquery library without updating the jqueryui library in parallel. I was using jquery 1.8.3 with jqueryui 1.9.0. However, when I updated jquery 1.8.3 to 1.9.1 I got the above error. When I commented out the offending .close method lines, it then threw an error about not finding .browser in the jquery library which was deprecated in jquery 1.8.3 and removed from jquery 1.9.1. So bascially, the jquery 1.9.1 library was not compatible with the jquery ui 1.9.0 library despite the jquery ui download page saying it works with jquery 1.6+. Essentially, there are unreported bugs when trying to use differing versions of the two. If you use the jquery version that comes bundled with the jqueryui download, I'm sure you'll be fine, but it's when you start using different versions that you off the beaten path and get errors like this. So, in summary, this error is from mis-matched versions (in my case anyway).

Solution 4

The new jQuery UI version will not allow you to call UI methods on dialog which is not initialized. As a workaround, you can use the below check to see if the dialog is alive.

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}

Solution 5

So you use this:

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

and if you open a MVC Partial View in Dialog, you can create in index a hidden button and JQUERY click event:

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

then inside partial view html you call button trigger click like:

$("#YouButton").trigger("click")

see ya.

View more solutions

Comments

[Oliver Lienhard]

This worked for me. Do i have to initialize the dialog every time i want to open it like this or only the first time? there are many dialogs. Is ther no way to set the options initiali and then open the dialogs by buttons?

[spadelives]

I found that this solution also solved the "Cannot call methods on dialog prior to initialization; attempted to call method 'open'" error that occurs when a dialog is successfully opened, closed, and then the users tries to open the dialog a second time. Thanks @ZOD

[johntrepreneur]

I solved this problem by also upgrading my jquery ui version to 1.9.2 and then it worked. So, jquery 1.9.1 with jquery ui 1.9.2 gets rid of the error above.

[Igor L.]

Gave you +1, cause it fixed my problem as well, but could you please explain why it works?

[nealio82]

@IgorLacik I assume that .dialog() returns an instance of itself so you can perform chaining. Therefore .dialog(opt).dialog('open') instantiates a dialog object (the first call) and then performs 'open' on it. I assume then that calling $(obj).dialog(opt) and then $(obj).dialog('open') afterwards will instantiate separate dialog objects on the jquery object, so the 2nd doesn't get to see the first one's configuration options. Without delving further into the dialog code it's hard to say for sure though, and I haven't the time for that :D

[JotaBe]

I have update the question to explain what you tried to explain.

[AaA]

And what does this exactly means?

[Paulj]

This is poorly explained, but valid. In MVC, I had the containing div tag for the dialog on my partial view. When I moved the containing div tag to the parent page, the dialog functioned properly.

[luis.ap.uyen]

It worked for me to close it instead. If you want to refer to the same dialog instance from an external script in order to close it, you only need to do this: $("#divDialog").dialog({}).dialog("close");

[caot]

It worked in var theDialog = $("#divDialog").dialog(opt); that is to do initialization. The opt can also be {}

[Srini Karthikeyan]

'autoOpen' is true by default. No need to specify it in options again.

[tvwxyz]

This worked for me!