2016年7月21日

Bootstrap modal prevent close (datepicker input in modal)

有個功能是 Bootstrap modal內有 datepicker input,還有一個 OK按鈕
如果不是按 OK就把 modal關閉的話,modal中輸入欄位的值要還原
如果是按 OK關閉 modal的話,檢核輸入值,檢核未過則 modal取消關閉

搜尋取消關閉 modal的範例後寫出大致如下的程式:
$('.modal').on('hide.bs.modal', function (e) {
  if (CheckClosedByBtnOK()) {
    if (!ValidInput()) {
      e.preventDefault();
      e.stopImmediatePropagation();
    }
  }
  else {
    ResetInput();
  }
});
但是發現使用 datepicker選完日期並關閉小視窗後也會觸發 hide.bs.modal,導致每次選完值就還原,有選跟沒選一樣

Bootstrap modal的官方文件中有說明 events還有一種 hidden.bs.modal,直接拿來套用,改成
$('.modal').on('hidden.bs.modal', function (e) { ...
現在不會選完值就還原了,也就是 hidden.bs.modal只有在 modal關閉時才會觸發,datepicker關閉時不會
但是另一個問題又來了,preventDefault、stopImmediatePropagation現在無效了

因為英文不好,對 Bootstrap modal官方文件的 Events說明琢磨了一會還是看不懂差異在哪:
hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

只好寫程式來觀察:
$('.modal').on('hide.bs.modal', function (e) {
  console.log(this);
  console.log('hide');
}).on('hidden.bs.modal', function (e) {
  console.log(this);
  console.log('hidden');
});
得出 hidden.bs.modal是在 modal被關閉後才觸發,所以 preventDefault當然沒有效果
hide.bs.modal是關閉前觸發,但是 modal內的 datepicker關閉時也會觸發 hide.bs.modal

所以改成先判斷 hide.bs.modal是否為 datepicker被關閉時觸發即可

var isUsingDatepicker = false;

$('.modal').on('show.bs.modal', function (e) {
  isUsingDatepicker = ($(div.datepicker-dropdown).length > 0);
}).on('hide.bs.modal', function (e) {
  if (!isUsingDatepicker) {
    if (CheckClosedByBtnOK()) {
      if (!ValidInput()) {
        e.preventDefault();
        e.stopImmediatePropagation();
      }
    }
    else {
      ResetInput();
    }
  }
  isUsingDatepicker = ($(div.datepicker-dropdown).length > 0);
});

沒有留言:

張貼留言