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?

Cyler

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.

Transcaucasia

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? – Cyler

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

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

@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 – Porte

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

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"); – Discard

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

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

Calcine

This worked for me! – Skylab

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

Oldie

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. – Oldie

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

Sociology

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

Hamlin

Answer 6

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");
  }
});

Bellyband

Answer 7

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.

Juvenal

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

Answer 8

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();

Irresolute

Answer 9

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

Biparty

And what does this exactly means? – Barnaul

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. – Parliamentarianism

Answer 10

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

Imbecilic

Answer 11

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.

Propagate