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?
This question is related to
jquery
dialog
jquery-ui-dialog
I got this error message because I had the div tag on the partial view instead of the parent view
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.
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).
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.
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");
}
});
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.
I simply had to add the ScriptManager to the page. Issue resolved.
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.
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();
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
}
Source: Stackoverflow.com