JQuery Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

I am suddenly getting this error form jquery : Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

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 am getting the revelant messages in the 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" ); i am getting the UI to show
                //however i am not seeing the OK button - 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>

jquery dialog close not working “cannot call methods on dialog prior to initialization; attempted to call method”

I am getting following error on my jquery dialog box close. jquery 1.9.1 jquery-ui-1.10.3 Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’ // Check if a g

jQuery UI – Error: cannot call methods on dialog prior to initialization; attempted to call method ‘open’

[Solved] I write this script. Unfortunately, jQuery console throw: Error: cannot call methods on dialog prior to initialization; attempted to call method ‘open’ I use jQuery 1.10.2 and jQuery UI 1.1

jQuery – cannot call methods on dialog prior to initialization

This one is really bugging me. I’m getting an error in my console of Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’ $( function() { $(‘#search_

jquery ui: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

I am using jquery ui dialog, I download it from jquery ui website, version is jquery-ui-1.10.2.custom.min.js, and jquery is jquery-1.9.1.js which is bundled with jquery ui js, but now I am encounterin

Error : cannot call methods on slider prior to initialization attempted to call method ‘value’

I have written something like below. onclick of div with id PLUS i am getting the following error: cannot call methods on slider prior to initialization attempted to call method ‘value’ Any help is

Error: cannot call methods on autocomplete prior to initialization; attempted to call method ‘destroy’

i am using ajax-solr.It works fine with jquery-ui-1.8.. but when i upgrade it to jquery-1.10.. it gives me this exception cannot call methods on autocomplete prior to initialization; attempted to call

jQuery error – Cannot call methods on tabs prior to initialization

I updated to the latest version of jQuery and I see this error. Error: Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call method ‘div.panes > div’ Complete S

Jquery UI dialog cannot call methods on dialog prior to initialization; attempted to call method ‘isOpen’

I use my code as bellow. The function get_devcies_full is call ever 5times if the dialog opens already Don’t opent it again just update the content Then i will code Bellow i the got the error in javas

JQuery UI Tab and Dialog: Error: cannot call methods on dialog prior to initialization; attempted to call method ‘open’

Recently, I developed my main page by using jQuery UI Tab and Dialog control. There are two tabs in the main UI, one is for Book form, and another is for Paper form(Book and Paper are my business

Why am I getting “Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’” from jQuery UI

I’m maintaining an application and haven’t used jQuery UI before. The application is using jQuery-UI 1.9 and jQuery 1.8.2 I have a link which launches a dialog. In the dialog is an input field and the

Answers

Looks like your buttons are not declared correctly (according to the latest jQuery UI documentation anyway).

try the following:

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

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 it will help you

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

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

This used to be working, so I think they must have removed support in JQUI for calling .dialog() on the popup itself at some point.

My workaround looks like this:

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

Is your $(this).dialog(“close”) by any chance being called from inside an Ajax “success” callback? If so, try adding context: this as one of the options to your $.ajax() call, like so:

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

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

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

Your options would become:

modal: true,
autoOpen: false,
buttons: buttonArray

After an hour ,i found best approach. we should save result of dialog in variable, after that call close method of variable.

Like this:

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

// . . .

dd.dialog('close');

I had a similar problem when opening a dialog with a partial layout in asp.net MVC. I was loading the jquery library on the partial page as well as the main page which was causing this error to come up.

Im also got the same Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

what i did is i triggered the close button event which is in the dialog header like

this is working fine for me to close the dialog

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

I stumbled over the same 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” is referencing to an non-dialog object, I got the error mentioned.

Solution:

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

I had this problem once before where one dialog box was throwing this error, while all the others were working perfectly. The answer was because I had another element with the same id=”dialogBox” else ware on the page. I found this thread during a search, so hopefully this will help someone else.

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

This happened for me when my ajax was replacing contents on the page and ending up with two elements the same class for the dialog which meant when my line to close the dialog executed based on the CSS class selector, it found two elements not one and the second one had never been initialised.

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

For anyone on ASP.NET MVC this occured because my controller action was returning a full view including the shared layout page which had the element when it should have been returning a partial view since the javascript was replacing only the main content area.

it seems for some reason jQuery UI will try to run all code defined in buttons at definition time. It is crazy but I had the same issue and it stoped once I made this change.

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

I was getting this error message when trying to close the dialog by using a button inside the dialog body. I tried to use $(‘#myDialog’).dialog(‘close’); which did not work.

I ended up firing the click action of the ‘x’ button on the header using:

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

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

function btnClose() {
  $(“.ui-dialog-titlebar-close”).trigger(‘click’);
}