Javascript не выполняется при ответе на диалоговое окно JQuery

У меня есть диалоговое окно на моей странице, которое создается с помощью виджета JQuery Dialog Widget. Я установил две кнопки, чтобы иметь функции, которые будут щелкать разными кнопками на странице, которые будут вызывать обратную передачу для страницы и делать разные вещи. Когда диалоговое окно модальное: false, диалоговое окно выполнит соответствующую функцию clickButton, однако, когда я устанавливаю модальный: истина, кнопка не будет нажата, хотя функция будет введена.

Я думаю, что мне не хватает чего-то о том, что делает modal: true в отношении выполнения функций, связанных с кнопками.

Ниже мой 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()
    };

Ответ 1

Модаль предотвращает всевозможные события/действия, на самом оверлее и любые DOM-события под ним. Но регулярные вызовы функций, такие как ваши: clickButton(), отлично, если вы ставите предупреждение в начале этой функции, вы увидите, что оно туда попало.

Проблема, с которой вы сталкиваетесь, заключается в том, что вы пытаетесь взаимодействовать с click элементом DOM, который находится ниже модального (это то, что здесь отрицается)

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

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

То, что я всегда делаю, сначала закрывает диалог, , а затем выполняет любые внешние скрипты (особенно, если я знаю, что они пытаются вызвать события dom). Делая это, у вас не будет проблем.

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);
   }
}

Эта крошечная задержка просто незаметна, не заметна и позволит вам запускать вашу функцию, сохраняя modal:true

Ответ 2

Попробуйте close событие:

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);
        }
});