Javascript non in esecuzione quando si risponde a una finestra di dialogo JQuery

Question

Ho una finestra di dialogo sulla mia pagina che viene creata utilizzando il widget di dialogo JQuery. Ho impostato i due pulsanti per avere funzioni che faranno clic sui diversi pulsanti della pagina che attiveranno i postback per la pagina e faranno varie cose. Quando la finestra di dialogo è modal: true, la finestra di dialogo eseguirà la relativa funzione di clickButton, tuttavia, quando ho impostato modal: true, il pulsante non verrà cliccato, anche se viene inserita la funzione.

Suppongo che mi manchi qualcosa su cosa modale: true fa per quanto riguarda l'esecuzione delle funzioni associate ai pulsanti.

Qui di seguito è il mio 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

modale impedisce a tutti i tipi di eventi/e delle azioni, sulla sovrapposizione stesso, e qualsiasi DOM eventi di sotto di essa. Ma le chiamate a funzioni regolari, come le tue a: clickButton() sono fine, se metti un avviso all'inizio di quella funzione vedrai che arriva lì.

Il problema riscontrato, è che si sta cercando di interagire e click un elemento DOM che si trova sotto il modal (che è ciò che viene negato qui)

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

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

Quello che ho sempre fare, è chiudere la finestra di dialogo prima, quindi eseguire qualsiasi script esterno (soprattutto se so che cercano di attivare eventi dom). In questo modo, non avrai problemi.

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

Quel piccolo ritardo è solo in caso, non-visibile, e vi permetterà di eseguire la funzione, mantenendo modal:true

Answer 2

Prova close evento:

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