JQuery error: cannot call methods in a dialog before initialization; tried to call the close method

Question

I unexpectedly get this error from jQuery:

Error: it is impossible to call methods in the dialog box before initialization; tried to call the close method

Plugins

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

JQuery code

I get these messages in the following function:

 $(document).ready(function() { if ($('#results').html().length != 0) { alert('has information'); $('#dialog').dialog({ modal: true, buttons: { Ok: function() { // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed, // however I do not see the OK button and no errors $(this).dialog('close'); } } }); } else { alert('has no data'); } }); 

HTML

 <div id="dialog" title="Server Response"> <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span> <label id="results">${results}</label> </p> </div> 

Answer 1

It looks like your buttons are not declared correctly (according to the latest version of jQuery UI ).

try the following:

 $( ".selector" ).dialog({ buttons: [{ text: "Ok", click: function() { $( this ).dialog( "close" ); } }] }); 

Answer 2

I had a similar problem when opening a partial layout dialog in asp.net MVC. I downloaded the jquery library on a partial page, as well as on the main page that caused this error.

Answer 3

Try this - it works for me:

 $(".editDialog").on("click", function (e) { var url = $(this).attr('href'); $("#dialog-edit").dialog({ title: 'Edit Office', autoOpen: false, resizable: false, height: 450, width: 380, show: { effect: 'drop', direction: "up" }, modal: true, draggable: true, open: function (event, ui) { $(this).load(url); }, close: function (event, ui) { $("#dialog-edit").dialog().dialog('close'); } }); $("#dialog-edit").dialog('open'); return false; }); 

Hope this helps you.

Answer 4

Is your $(this).dialog("close") random call due to the Ajax success callback? If so, try adding context: this as one of the options for your call to $.ajax() , for example:

 $("#dialog").dialog({ modal: true, buttons: { Ok: function() { $.ajax({ url: '/path/to/request/url', context: this, success: function(data) { /* Calls involving $(this) will now reference your "#dialog" element. */ $(this).dialog( "close" ); } }); } } }); 

Answer 5

I also got the same error: I cannot call methods in a dialog before initialization; tried to call the close method

what i did was i called the close button event which is in the dialog header as

this works great for closing the dialog

 function btnClose() { $(".ui-dialog-titlebar-close").trigger('click'); } 

Answer 6

For some reason, the jQuery user interface will try to run all the code defined in the buttons during the definition. This is crazy, but I had the same problem and it stopped as soon as I made this change.

 if ($(this).dialog.isOpen === true) { $(this).dialog("close"); } 

Answer 7

I got the same error in 1.10.2. In my case, I wanted to make a click on the overlay background a hidden dialog that is currently visible, regardless of which element it was based on. Therefore, I had this:

 $('body').on("click", ".ui-widget-overlay", function () { $(".ui-dialog").dialog('destroy'); }); 

This worked, so I think they had to remove support in JQUI to call .dialog () in a popup at some point.

My workaround is like this:

 $('body').on("click", ".ui-widget-overlay", function () { $('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy'); }); 

Answer 8

I came across the same thing and wanted to share my solution:

 <script type="text/javascript"> $( "#dialog-confirm" ).dialog("option","buttons", { "delete": function() { $.ajax({ url: "delete.php" }).done(function(msg) { //here "this" is the ajax object $(this).dialog( "close" ); }); }, "cancel": function() { //here, "this" is correctly the dialog object $(this).dialog( "close" ); } }); </script> 

because "this" refers to an object without a dialog, I got the error mentioned.

Decision:

 <script type="text/javascript"> var theDialog = $( "#dialog-confirm" ).dialog("option","buttons", { "delete": function() { $.ajax({ url: "delete.php" }).done(function(msg) { $(theDialog).dialog( "close" ); }); }, "cancel": function() { $(this).dialog( "close" ); } }); </script> 

Answer 9

I had this problem before when one dialog box threw this error and all the others worked fine. The answer was because I had another element with the same id="dialogBox" else ware on the page. I found this thread while searching, so hopefully this helps someone else.

Answer 10

So you use this:

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

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

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

then inside the partial view of html you call the trigger button, for example:

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

see ya.

Answer 11

This happened for me, when my ajax replaced the content on the page and as a result there were two elements of the same class for the dialog, which meant that when my line closes the dialog based on the CSS class selector, it found two elements: one and the second never have not been initialized.

 $(".dialogClass").dialog("close"); //This line was expecting to find one element but found two where the second had not been initialised. 

For any ASP.NET MVC, this happened because my controller action returned the full view, including the general layout page, in which there was an element when it was supposed to return a partial view, since javascript replaced only the main content area.

Answer 12

I had a similar problem that I solved by defining my array of buttons outside the dialog declaration.

 var buttonArray = {}; buttonArray["Ok"] = function() { $( this ).dialog( "close" );} 

Your options:

 modal: true, autoOpen: false, buttons: buttonArray 

Answer 13

An hour later I found a better approach. we must save the result of the dialog in a variable, after that the method of closing the call to the variable.

Like this:

 var dd= $("#divDialog") .dialog({ height: 600, width: 600, modal: true, draggable: false, resizable: false }); // . . . dd.dialog('close'); 

Answer 14

I received this error message when I tried to close the dialog using the button inside the body of the dialog. I tried to use $('#myDialog').dialog('close'); which did not work.

As a result, I clicked the "x" button in the header using:

 $('.modal-header:first').find('button:first').click(); 

Answer 15

Senguttuvan: your solution was the only one that worked for me.

BtnClose () function {
$ ("UI-dialog-Titlebar-close.") Trigger ('click').
}

Answer 16

I have the same problem, I open several dialog boxes, and my problem was that the contents had to be deleted so that the form data remained with the same data, then these parameters are created in the dialog box

 var dialog = $("#dummy-1"); dialog.html('<div style="position:absolute; top:15px; left:0px; right:0px; bottom:0px; text-align:center;"><img align="middle" src="cargando.gif"></div>'); dialog.html(mensaje); dialog.dialog( { title:'Ventana de Confirmacion', width:400, height:200, modal:true, resizable: false, draggable:false, position: { my: "center center", at: "center center", of: window }, buttons: [ { text: "Eliminar", click: function() { functionCall(dialog,var1,var2); } }, { text: "Cerrar", click: function() { dialog.dialog("close"); } } ], close: function(event, ui) { dialog.dialog("close").dialog("destroy").remove(); } }); 

and the dialogue is passed as a function parameter to perform the action:

  function functionCall(dialogFormulario,var1,var2) { //same action dialogFormulario.dialog("close"); 

}

Here you only need to use .dialog ("close") and no .dialog ("destroy"), because the dialog will call its close function: and the element will not exist

Answer 17

I had a similar problem and in my case the problem was different (I use Django templates).

The order of JS was different (I know that the first thing you check, but I'm pretty sure it is not, but it was). The js that invokes the dialog is called before the jqueryUI library has been called.

I use Django, so I inherited the template and used {{super.block}} to inherit the code from the block and the template. I had to move {{super.block}} at the end of the block that solved the problem. The js causing the dialog was declared in the Media class in Django admin.py. I spent more than an hour to figure this out. Hope this helps someone.

Answer 18

Create a separate JavaScript function that you can call to close the dialog box with a specific object identifier, and place the function outside of $(document).ready() as follows:

 function closeDialogWindow() { $('#dialogWindow').dialog('close'); } 

NOTE. The function must be declared outside of $(document).ready() so jQuery does not try to raise a close event in the dialog before creating it in the DOM.

Answer 19

You can declare the contents of the button outside the dialog, this works for me.

 var closeFunction = function() { $(#dialog).dialog( "close" ); }; $('#dialog').dialog({ modal: true, buttons: { Ok: closeFunction } }); 

Answer 20

I know that this is a very old problem, but I had the same problem when it remained open when navigating along an angular route and with an open dialog box. So, I found a way to call the close method in the destructor of the route controller. But got this aforementioned error if the dialogue was not open. So the answer is this: if you close the dialog box before initializing, this will happen due to this error. To check if a dialog box is open, close it by wrapping your close state in that state.

 if($('#mydialog').dialog('isOpen')) { //close dialog code}