[jQuery] jQuery UI 1.9.x 的 Dialog

jQuery UI 1.9.x 的 Dialog


轉自：http://blog.farmer.idv.tw/?p=1727


將 jQuery UI 1.8.x 昇上 1.9.x 後發現, FireBug 上顯示了一個

Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

問題是指向的是 jQuery.js

測了一下 jQuery + jQuery UI 的版本組合後斷定問題應該在 jQuery UI 1.9.x 所支援的 Dialog, 不知是做了什麼變動, 導致過去能支援的應用, 如今卻變成了問題了.

google 後只發現有人回應了相同的問題, 但還沒發現明確的問題所在與確切的解決方案….. 哀! 新的折磨要開始了…

比對 jQuery UI 1.9.1 與 1.8.24 的 jquery.ui.dialog.js 發現 $.widget 內的原來的 destroy 變成 _destory 了, 而且 close 的做法有相當大的變動, 1.9.1 的 close 先添了兩道判斷

if ( !this._isOpen ) {
  return;
}

if ( false === this._trigger( "beforeClose", event ) ) {
  return;
}
驗證後, 發現果然是新的 dialog close 機制造成的. 小修改相關於 dialog.close() 的引用後, 錯誤就消失了.

面對新機制, 處理動態性的 dialog 機制時 譬如 ajax 後的 dialog 引用, 必須先明確的 initialization (將 autoOpen 設為 false), 如此後續的 open, close 等流程處理就可避免類似未 initialization 的錯誤困擾了. 這個問題該歸咎於早先撰寫習慣不好, 1.8.x 其實也有相同的機制, 只是檢測沒有 1.9.x 嚴謹而已.

正式調整到 jQuery 1.8.2 + jQuery UI 1.9.1 的組合, 測試 251home 實驗站.