Làm thế nào để ngăn chặn bootstrap phương thức đóng từ nút bằng cách sử dụng onclick?

Question

tôi có phương thức với nút (Save)

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

làm thế nào để ngăn chặn đóng cửa khi do_save() chức năng thất bại? (Ví dụ như khi một số dữ liệu không xác nhận)

Answer 1

Không sử dụng data-dismiss="modal" và để cho hàm gần bạn (ẩn) modal của bạn:

<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

Vì bạn đang sử dụng jQuery anyway, hãy thử không có JavaScript/jQuery được nhúng trong mã của bạn.

$('#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> 

Thay vào đó, bạn có thể ngăn chặn việc đóng bằng cách chặn sự kiện 'ẩn' và trả về false.

Answer 3

Nếu bạn bắt nhấp kiện từ nút như thế này:

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

bạn thực sự có thể ngăn chặn sự đóng cửa của phương thức của bạn. Đối với điều này, tùy thuộc vào tình hình của bạn, bạn sẽ tìm thấy hai chức năng hữu ích:

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

Nếu tôi hiểu trang web này (đó là bằng tiếng Đức) http://www.mediaevent.de/javascript/event-handler-default-verhindern.html một cách chính xác, preventDefault() dừng hành động mặc định ngay lập tức (như theo một liên kết). Tuy nhiên, bản thân sự kiện này vẫn sẽ đi qua DOM và có thể được "nghe" bởi những người nghe sự kiện khác nhau, một trong số đó là người nghe sự kiện che giấu phương thức. Đối với điều này, chức năng thứ hai là cần thiết, nó sẽ dừng sự kiện đi qua DOM. Vì vậy, nó không thể được nghe bởi người nghe ẩn và cửa sổ sẽ không được đóng lại (ẩn). Vì vậy, tôi đề nghị để thực hiện các chức năng như vậy:

 $('#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 
     } 
    }); 

Trong mã của tôi, tôi chỉ cần sử dụng stopPropagation(), như hành động mặc định của tôi đang bị truy nã, vì vậy bạn có thể sử dụng hai chức năng một cách độc lập.

lưu ý: Giải pháp này chỉ được kiểm tra bằng trình duyệt Firefox