Why am I getting "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'" from jQuery UI

Question

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 content of that is PUT to the server to create a resource.

<div id="addThingDialog" title="Add a thing" class="dialog" style="display:none">
    <input type="text" placeholder="New Thing Name" id="newThingName"/>
</div>

I think I'm calling initialise correctly as I can open and close the dialog from the console. And by clicking the link. My setup is:

 $("#addThingDialog").dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            modal: true,
            buttons: {
                Submit: {
                    text: "Submit",
                    'class': 'green',
                    click: saveNewThing
                },
                Cancel: {
                    text: 'Cancel',
                    'class': 'purple',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            }
        });

and the saveNewThing method looks like:

function saveNewThing() {
    var name = $('#newThingName').val();

    if (!name) {
        alert('You must provide a thing name');
        return;
    }
    console.log('saving ' + name);
    $.ajax('/api/things/' + name,
        {
            type: "PUT",
            dataType: 'json',
            contentType: 'application/json',
            success: function (result) {
                //now reload the current tab
                $('#addThingDialog').dialog('close');
            },
            error: function (xhr, status, error) {
                console.log(error);
                $('#addThingDialog').dialog('close');
            }
        });
}

However, when I click the submit button nothing happens and in the console an error is logged: "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"

The error points at the line in saveNewThing beginning $.ajax

If I click submit a second time then the network call is made, the thing is created, and the dialog closed.

So my question is what is causing the error and how do I fix it?

Thanks in advance

---

Wow! Thanks to @MaVRoSCy for making the fiddle. It gave me the confidence to say my solution should work and now it's time to sit and step through the jQuery code.

Which led me to:

$("body").on({
    ajaxStart: function () {
        $(".dialog").dialog('close'); //oh oh!
        $(this).addClass("loading");
    },
    ajaxStop: function () {
        $(this).removeClass("loading");
        resizeDashboard();
    }
});

Commenting out the line closing dialogs and selecting on class solved my problem. I'm not completely sure why but am happy nonetheless.

Kudos to @MaVRoSCy - I know to stop and make a simple version of the problem but forgot.

Answer 1

I think you must be missing something.

Here is a fiddle of your code and works perfectly ok .

The only thing I have changed is this (just to make a valid Ajax Call):

$.ajax('http://jsfiddle.net/echo/jsonp/', {