Error: cannot call methods on dialog prior to initialization; attempted to call method 'close' Jquery onclick button

Question

My requirement is to open the dialoge onclick Cancel button. Once 'Cancel the Reservation' is clicked, the form should be submitted.

With the below code, I am getting the error : Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

I have my div as :

<div id="dialog" title="Confirmation Required" style="display:none">
            Are you sure about this?
</div>

Button as :

<input type="submit" id="btnCxlJob" name="btnCxlJob" value="Cancel" />

In document.Ready :

$("#dialog").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Cancel the Reservation': function() {

                $(this).dialog('close');
                document.JobConf.submit;

            },
            'Cancel': function() {
               $(this).dialog('close');
            }
        }
    });
    $("#btnCxlJob").click(function() {
        var theDialog = $("#dialog").dialog();
        alert("clicked!");
        theDialog.dialog("open");

    });

Although I tried suggestions from other posts for this error but could not get rid of this error.Any help is hugely appreciated. Thank you

Answer 1

It is a version problem. Use jqueryui 1.9.2 with jquery 1.9.1 and you do not have the problem. It is even better if you use the most recent versions of both.

Used in my test

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Answer 2

You must prevent the submit button submitting the form. Add the event argument e to the function in onClick and use preventDefault on it.

$("#btnCxlJob").click(function(e) {
    var theDialog = $("#dialog").dialog();
    alert("clicked!");
    theDialog.dialog("open");
    e.preventDefault();
});

Replace document.JobConf.submit; with $("#<id of the form>").submit();

Use it with the id assigned to your form. If it is JobConf the code would be $("#JobConf").submit();.