Javascript not executing when answering a JQuery Dialog Box

Question

I have a dialog box on my page which is made using the JQuery Dialog Widget. I have set up the two buttons to have functions which will click different buttons on the page which will trigger postbacks for the page and do various things. When the dialog box is modal: false, the dialog box will execute the relevant clickButton function, however, when i set modal: true, the button will not be clicked, although the function is entered.

I guess I am missing something about what modal: true does with regards to executing the functions associated with the buttons.

Below is my javasript

    function displayQuoteToCashMessage() {
        //this is where we do that alert for the QuoteToCash request stuff
        $("#<%=divQuoteToCashAlert.ClientId %>").show();
        $("#<%=divQuoteToCashAlert.ClientId %>").dialog({
            modal: false,
            resizable: false,
            buttons: {
                "Ok": function () {
                    //save confirmations
                    clickButton(true);
                    $(this).dialog("close");
                },
                "No": function() {
                    clickButton(false);
                    $(this).dialog("close");
                }
            }
        });        
    }

    function clickButton(b) {
        //do something with b
        document.getElementById(btnSave).click()
    };

Answer 1

Modal prevents all kinds of events / and actions, on the overlay itself, and any DOM events below it. But regular function calls, like yours to:clickButton() are fine, if you put an alert at the beginning of that function you will see it gets there.

The problem you are having, is that you are trying to interact with and click a DOM element that is below the modal (which is what is being denied here)

// It gets here without a problem
function clickButton(b) {

    // But this event here is what *modal* is preventing.
    document.getElementById(btnSave).click();
}

What I always do, is close the dialog first, then execute any exterior scripts (especially if I know they try to trigger dom events). By doing this, you'll have no problems.

jsFiddle DEMO

buttons: {
  "Ok": function () {

     $(this).dialog('close');

     // now wait a 100 ms for it to fully close 
     // this is mainly for the slow browsers, "just in case" really

     setTimeout(function () {
        clickButton(); // now we call your function (knowing the modal is gone)
     }, 100);
   }
}

That tiny delay is just incase, un-noticeable, and will let you run your function while keeping modal:true

Answer 2

Try close event:

var okButtonWasClicked = false;
$( "#<%=divQuoteToCashAlert.ClientId %>" ).dialog({ 
    buttons: {
        "Ok": function () {
            okButtonWasClicked = true;
            $(this).dialog("close");
        },
        "No": function() {
            okButtonWasClicked = false;
            $(this).dialog("close");
        }
    },
    close: function() {
        if(okButtonWasClicked) {
           clickButton(true);
        } else {
            clickButton(false);
        }
});