Javascript nie jest wykonywany podczas odpowiadania na okno dialogowe JQuery

Question

Mam okno dialogowe na mojej stronie, które jest wykonane przy użyciu widgetu Okno dialogowe JQuery. Ustawiłem dwa przyciski, aby mieć funkcje, które będą klikać różne przyciski na stronie, które będą wywoływać posty zwrotne dla strony i robić różne rzeczy. Kiedy okno jest modalne: fałszywy, okno dialogowe będzie wykonać odpowiedni clickButton funkcję, jednak kiedy ustawiony modal: prawdziwy, przycisk nie zostanie kliknięty, chociaż ta funkcja jest wpisany.

Zgaduję, że brakuje mi czegoś o tym, co modal: true robi w odniesieniu do wykonywania funkcji związanych z przyciskami.

Poniżej jest moje obsługi JavaScript

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 zapobiega wszelkiego rodzaju imprez/i działań, na samej nakładki, a wszelkie zdarzenia DOM poniżej. Ale zwykłe wywołania funkcji, takie jak twoje, do: clickButton() są w porządku, jeśli umieścisz alert na początku tej funkcji, zobaczysz, że się tam dostanie.

Problem masz, jest to, że starają się rozmawiać i click elementu DOM, który jest poniżej modalnym (co jest co jest zabroniony tutaj jest)

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

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

Co ja zawsze, zamknij najpierw okno dialogowe, aby uzyskać dowolne zewnętrzne skrypty (szczególnie jeśli wiem, że próbują wyzwolić zdarzenia DOM). Robiąc to, nie będziesz miał problemów.

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

To małe opóźnienie jest tylko okrywać, un-zauważalne, a pozwoli Ci uruchomić funkcję zachowując modal:true

Answer 2

Spróbuj close zdarzenie:

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