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?

score 149 · Accepted Answer · edited Oct 09 '15 at 08:26

149

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.

edited Oct 09 '15 at 08:26

Appulus

18,630
11
38
46

answered Nov 22 '12 at 21:36

Kneel-Before-ZOD

4,141
1
24
26

5

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? – Oliver Lienhard Nov 22 '12 at 22:05
6

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 – spadelives Jan 08 '13 at 06:24
Gave you +1, cause it fixed my problem as well, but could you please explain why it works? – Igor L. Apr 08 '13 at 09:28
2

@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 – nealio82 May 30 '13 at 10:12
I have update the question to explain what you tried to explain. – JotaBe Jun 19 '13 at 13:41
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"); – luis.ap.uyen May 02 '18 at 08:52
It worked in `var theDialog = $("#divDialog").dialog(opt);` that is to do initialization. The `opt` can also be `{}` – caot Aug 23 '19 at 19:50

score 28 · Answer 2 · answered Nov 19 '13 at 22:44

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.

score 10 · Answer 3 · answered Mar 12 '13 at 20:51

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

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. — johntrepreneur, Mar 12 '13 at 21:12

score 5 · Answer 4 · answered Jul 04 '19 at 05:20

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
}

score 4 · Answer 5 · answered Jan 07 '15 at 11:44

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.

score 4 · Answer 6 · answered Jun 01 '19 at 00:44

My case is different, it fails because of the scope of 'this':

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});

score 2 · Answer 7 · answered Aug 11 '15 at 13:40

2

If you want to open the Dialog immediately when the Dialog is initialized or the page is ready, you can also set the parameter autoOpen to true in the options object of dialog:

var opt = {
        autoOpen: true,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

Thus, you do not have to call the `$("#divDialog").dialog("open");

When dialog object is initialized, the dialog is automatically opened.

answered Aug 11 '15 at 13:40

Gašper Sladič

867
2
15
32

'autoOpen' is true by default. No need to specify it in options again. – Srini Karthikeyan Feb 11 '21 at 08:14

score 0 · Answer 8 · answered Mar 15 '14 at 17:03

0

This is also some work around:

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();

answered Mar 15 '14 at 17:03

Damian Królikowski

1
1
1

score 0 · Answer 9 · answered Mar 31 '15 at 15:28

0

I got this error message because I had the div tag on the partial view instead of the parent view

answered Mar 31 '15 at 15:28

user1152145

275
1
3
11

1

And what does this exactly means? – AaA May 13 '15 at 08:42
2

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. – Paulj Jul 12 '17 at 20:21

score 0 · Answer 10 · answered Mar 14 '18 at 17:36

0

I simply had to add the ScriptManager to the page. Issue resolved.

answered Mar 14 '18 at 17:36

gnardizzi

1

score 0 · Answer 11 · answered Oct 12 '18 at 15:31

In my case the problem was that I had called $("#divDialog").removeData(); as part of resetting my forms data within the dialog.

This resulted in me wiping out a data structure named uiDialog which meant that the dialog had to reinitialize.

I replaced .removeData() with more specific deletes and everything started working again.

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

11 Answers11

Linked

Related