Error when clicking buttons in jquery dialog

Question

I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. "Uncaught TypeError: Cannot read property 'apply' of undefined"

HTML:

<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
    <div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>

JQuery:

<script type="text/javascript">
    $(document).ready(function () {
       $("#reject-dialog").dialog({
            autoOpen: false,
            modal: true,                    
            buttons: {
                "Confirm": {
                    text: "OK",
                    id: "confirm-reject"
                },
                "Cancel": {
                    text: "Cancel",
                    id: "cancel-reject"
                }
            }
       });
       $("#btn-reject").click(function (e) {
           e.preventDefault();

           $("#reject-dialog").dialog('open');
       });
       $('#cancel-reject').click(function () {
           $("#reject-dialog").dialog('close');
           console.log('confirm');
       });
       $('#confirm-reject').click(function () {
           $("#reject-dialog").dialog('close');
           console.log('reject');
       });
});  //dom

</script>

JQuery versions:

Answer 1

you are binding to buttons that don't exist yet on document.ready .

instead you can tell the dialog what callback to trigger while creating the buttons.

Update:

according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats:

1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.

2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.

i updated the code to reflect that.

code

<script type="text/javascript">
$(document).ready(function () {
   var dialogDiv = $("#reject-dialog");
   dialogDiv.dialog({
        autoOpen: false,
        modal: true,                    
        buttons: [
            {
                text: "OK",
                id: "confirm-reject",
                click: function() {
                    dialogDiv.dialog("close");
                      console.log('confirm');
                }
            },
            {
                text: "Cancel",
                id: "cancel-reject",
                click: function(){
                    dialogDiv.dialog("close");
                    console.log('reject');
                }
            }
       ]
   });
   $("#btn-reject").click(function (e) {
       e.preventDefault();

       dialogDiv.dialog('open');
   });
});  //dom

</script>

Answer 2

You need to use .on() 's event delegation since the buttons don't exist when the code is executed.

For example, change:

$('#cancel-reject').click(function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

to:

$(document).on('click','#cancel-reject', function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

jsFiddle example

Ideally you want to bind to an element that already exists on the page that's closer than document for better performance.

Answer 3

You need to inform a click function, even you need to bind a click handler after the create the dialog. I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.

So, I suggest that you define an empty function (or jQuery.noop):

"Confirm": {
    text: "OK",
    id: "confirm-reject",
    click: function(){} // or jQuery.noop()
}