Jak zapobiec modulowi bootstrapu przed zamknięciem za pomocą przycisku przy użyciu onclick?

Question

mam modalnego z przycisku (Save)

<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save 
    </button> 

jak zapobiec zamknięciu kiedy do_save() funkcja nie powiodło? (Na przykład, gdy niektóre dane nie potwierdzić)

Answer 1

Nie używaj data-dismiss="modal" i pozwól blisko function (ukryj) swoją modalne:

<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button> 

"

function do_save() 
    { 
     if(Math.floor(Math.random() * 2)==1) 
     { 
      console.log('success'); 
      $('#myModal').modal('hide'); 
      return; 
     } 
     console.log('failure'); 
     return false; 
    } 

Answer 2

Ponieważ używasz Mimo to jQuery, staraj się nie umieszczać kodu JavaScript/jQuery w swoim kodzie.

$('#buttonId').on('click', function() { 
    // either call do_save or embed the contents of do_save in here 
    var myDataIsValid = true; // change to call validator function 
    if (myDataIsValid) { 
    $('#myModal').modal('hide'); 
    } 
    return true; // value depends on whether you want stopPropagation or not. 
}); 

HTML:

<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button> 

Alternatywnie prawdopodobnie można zapobiec zamknięciu, przechwytując zdarzenie "hide" i zwracając z tego wartość false.

Answer 3

Jeśli złapać click-zdarzenie z przycisku takiego:

 $('#buttonId').off('click').click(function(clickEvent){ 
     //enter code here 
    }); 

rzeczywiście może uniemożliwić zamknięcie Twój modalne. W tym celu, w zależności od sytuacji, można znaleźć tych dwie funkcje przydatne:

 clickEvent.preventDefault(); 
    clickEvent.stopPropagation(); 

Gdybym rozumiał ten serwis (który jest w języku niemieckim) http://www.mediaevent.de/javascript/event-handler-default-verhindern.html poprawnie, preventDefault() zatrzymuje natychmiastową akcję domyślną (takich jak podążając za linkiem). Jednak samo wydarzenie będzie nadal podróżować przez DOM i może być "słyszane" przez różnych słuchaczy zdarzeń, jednym z nich jest słuchacz wydarzeń, który ukrywa modal. W tym celu potrzebna jest druga funkcja, która zatrzymuje podróż zdarzenia przez DOM. W związku z tym nie można go usłyszeć przez ukrytego słuchacza, a okno nie zostanie zamknięte (ukryte). W związku z tym proponuję, aby realizować funkcje tak:

 $('#buttonId').off('click').click(function(clickEvent){ 
     //enter code here 
     var myDataIsValid = true; 
     // check if Data is valid => myDataIsValid = true or false 
     if(myDataIsValid){ 
     //do Stuff 
     }else{ 
     clickEvent.preventDefault(); 
     clickEvent.stopPropagation(); 
     //do other Stuff 
     } 
    }); 

W moim kodu, trzeba tylko użyć stopPropagation(), jak moja domyślna akcja jest poszukiwany, dzięki czemu można korzystać z dwóch funkcji niezależnie. Uwaga: To rozwiązanie zostało przetestowane tylko z przeglądarką Firefox