jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"

Question

I'm trying to make a div from inside of the dialog be the 'close' button of the dialog box, but after passing an event onto it, I get this error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

I've tried intializing it in a variable (with var $this = $(this);) but nothing seems to be getting rid of that error.

My HTML & PHP:

<?php

print(

"<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>".
    "<div id='boxHeader'>".
        "<div id='boxHeaderText'>"._BEANDF_LOG_SELECT. "</div>".
        "<div id='closeBox'>". _BEANDF_CONTROL_CENTER_CLOSE. "</div>".
            "<div style='clear:both'>". 
            "</div>".
    "</div>".
 );
 ?>

The jQuery:

function initImpactFactorDialog(){
    $("#opener").click(function() {
        ($("#dialogBox").dialog("isOpen") == false) ? $("#dialogBox").dialog("open") : $("#dialogBox").dialog("close") ;
        });

    $("#dialogBox").dialog({
        autoOpen: false,
        draggable: true,
        width: 700,
        height: 300,
        position:[440,118],
        //buttons

    close: 
        $("#closeBox").click(function() {
        $(this).dialog('close');

    })
    });
}

The dialog box should close when clicking on my custom button. Thank you!

David David · Accepted Answer · 2019-05-15T11:48:52

close doesn't appear to be an option in jQuery UI Dialog. It looks like you're intending that to be part of the buttons option. Something structurally more like this:

buttons: {
    close: someFunction
}

At that point the key difference here is the function. You're not passing a function, you're immediately invoking a jQuery selector to attach a click handler. Inside that click handler, you're referring to the button being clicked as the dialog. As the error tells you, since that button element was never initialized as a dialog, it can't be closed.

You don't need to manually create the click handler. Just use the handler function in the jQuery UI Dialog options:

buttons: {
    close: function () {
        $(this).dialog('close');
    }
}

On the other hand, if you don't want a dialog "close" button but want to use this custom button, then don't initialize it in the dialog buttons. In that case you'd initialize a click handler outside of the jQuery UI dialog initialization, and you'd refer to the dialog (not to this). Something like:

$("#dialogBox").dialog({
    // your initialization options, without buttons
});

$("#closeBox").click(function() {
    $("#dialogBox").dialog('close');
});

It seems like you're mixing up the two approaches, that's all.

jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"

2 Answers