jQuery error “Uncaught TypeError: Cannot read property 'apply' of undefined”

Question

I'm enabling an OK button in a jQuery dialog box based on changes to a Select field.

That part works, but when I click on OK or 'Close' in order to save that information and proceed, the following errors appear.

Chrome: Uncaught TypeError: Cannot read property 'apply' of undefined

Firefox: TypeError: d.click is undefined

... e="button">').click(function(){d.click.apply(c.element[0],arguments)})....
jquery-ui.min.js (line 14, col 5350)

    var disposition;  // I'm using this so that the alert('fixed') doesn't get call on load...  

//  Callback Disposition Dialog
$('#disposition_modal').dialog({
    open: function () {  // removed the default close link
        $(this).parent().children(':first').children('a').remove();
    },
    buttons: [{
        text: 'Cancel',
        Ok: function () {
            $(this).dialog("close");
        }
    }, {
        text: 'OK',
        disabled: true,
        id: 'dm_btn',
        Ok: function () {
            if (disposition !== '' && undefined !== disposition) {
                alert('fixed');
                $(this).dialog("close");
            }
        }
    }]
});

// toggle the OK button 
$('#disposition_id_in2').change(function () {
    disposition = $('#disposition_id_in2').val();
    if ($('#disposition_id_in2').val()) {
        $('#dm_btn').attr('disabled', false);
    } else {
        $('#dm_btn').attr('disabled', true);
    }
});

Here's a JSFiddle distillation of the problem to its barest minimum: JSFiddle button error

Answer 1

You need to change "Ok" to "click" for the buttons.

buttons: [{
    text: 'Cancel',
    click: function () {
        $(this).dialog("close");
    }
}, {
    text: 'OK',
    disabled: true,
    id: 'dm_btn',
    click: function () {
        console.log(disposition);
        if (disposition !== '' && undefined !== disposition) {
            alert('fixed');
            $(this).dialog("close");
        }
    }
}]

jsfiddle