Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Question

Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.

Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.

• The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
• Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.

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

I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Here is the code for it.

$(document).ready(function() {
    $(".dig").click(function() {
        //based on which we click, get the current values
        var cItemName = $("#checklistItemName").attr( "title");
        var c2id = $("#check2id").attr( "title");
        $("#ItemName").html(cItemName);
        $("#ItemID").html(c2id);
        $("#objCheckItemName").val(cItemName);        
        $("#objCheck2ID").val(c2id);
        console.log(cItemName);
        console.log(c2id);
    }); 
    $( "#image-form" ).dialog({
        autoOpen: false,
        height: 450,
        width: 650,
        modal: true,
        buttons: {
            "Submit": function() {
                $('#mForm').submit();
                return true;
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            $('#defaultSectionName')
                .val('');
            $('#defaultSectionDesc_hidden')
                .val('');
            $('#Photo')
                .val('');
            $('#objCheck2ID')
                .val('');
            $('#Check21')
                .val('');
        },
        zIndex: 500
    });

The next piece of code is where I believe the problems are occurring.

    $( "#image_trigger" )
        .click(function() {
        $( "#image-form" ).dialog( "open" );
    });
    var dlg=$('#register').dialog({
        title: 'Case Pictures',
        resizable: true,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width:650,
        height:450,
        buttons: {
            close: function() {
                $( this ).dialog( "close" );
            }
        },
        zIndex: 500
    });
    $('#reg_link').click(function(e) {
        e.preventDefault();
        var linkurl=('assets/includes/modalPictures.cfm' + '?'
            + 'id=' + $("#objCheck2ID").val()
    );
    dlg.load(linkurl, function(){
        dlg.dialog('open');
    });
});

jQuery UI: 1.10.1

jQuery: 1.9.1

Server Side: Coldfusion

The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!

Answer 1

Upper case?

Close: function() {

Answer 2

You have to initialize your jquery dialog before calling the open function.

<script type="text/javascript">
    $(document).ready(function () {
         initializeDialog();
    });
</script>

And change your js file to have the dialog code in initializeDialog() function.

function initializeDialog(){
    
    $("#your-dialog-id").dialog({
        autoOpen: false,
        buttons: {
            "Cancel": function() {
                $(this).dialog("close");
            }
        },
        modal: true,
        resizable: false,
        width: 600px,
        height: 400px
    });
}

Thanks @bpjoshi