jQuery Modal popup dialog ok button click event

Question

I am trying to open dialog box and passing OK callback function in helper function. So on click of Ok button that function will execute. But problem is, callback function getting executed at the time of dialog function call. Below is my code.

  function ModelMessage(message, title, messageType, okButtonText, okCallBack) { 
$("#dialog-confirm").dialog({
        resizable: false,
        height: 200,
        modal: true,
        open: function (event, ui) {            
            $('.ui-button-text').each(function (i) {
                $(this).html($(this).parent().attr('text'));
            });                
        },
        buttons: [{
            text: "Ok",
            id : "btnModalDialog",
            Click : function () {                    
                okCallBack();                   
                $("#dialog-confirm").dialog("close");
            }
        }]
    });

Below is the code from where I am calling this helper function:

ModelMessage(ProjectSaveSuccess, null, null, "Ok", function () {
                                window.location.href = url_CreateProject + "?projectID=" + PID.val();
                            });

I am using jquery-1.9.1.js and jquery-ui.js(1.9.1). This issue is not replicate in older version of jquery. Is this jquery known bug?

Answer 1

I can surely say that this is bug of jquery 1.9.1. Below is the hack cum solution i have done.

In button declaration I have put condition-when dialog box is open then only button callback function execute. Look at the below button declration.

buttons: [{
            text: "Ok",
            id : "btnModalDialog",
            Click : function () {                    
                var isOpen = $("#dialog-confirm").dialog("isOpen");
                    if (isOpen == true) {
                    okCallBack();
               }
                $("#dialog-confirm").dialog("close");
            }
        }]

Answer 2

I think you did a bad implementation of the «buttons» property. Try this :

 $("#dialog-confirm").dialog({
    resizable: false,
    height: 200,
    modal: true,
    open: function (event, ui) {            
        $('.ui-button-text').each(function (i) {
            $(this).html($(this).parent().attr('text'));
        });                
    },
    buttons: [{
         Ok: function() {
             okCallBack();
             $(this).dialog("close");
         }
    }]
});