覆寫jQuery UI Dialog plugin

       最近有一個需求是要自訂jQuery UI Dialog plugin的行為，像是增加新的option和額外處理dialog出現時的 UI配置。研究一下知道要用Jquery UI的Widget Factory，讓jQuery UI Dialog覆寫他自己的function。

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {}):

再把要覆寫的function寫到最後的{}底下：

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
//覆寫open事件，先呼叫super再執行自訂的函式。把醜醜的jquery ui 叉叉圖案改成fontawesome
  open: function() {
    $.ui.dialog.prototype.open.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  },
  //覆寫建立title事件，改為自行定義的函式。增加title前的圖案
  _title: function(title) {
    if (!this.options.type || this.options.type == "info") {
      this.uiDialog.removeClass("error").addClass("info");
      if (!this.options.title) {
        title.html(" 提示");
      } else {
        title.html(" " + this.options.title);
      }
    } else {
      switch (this.options.type) { //可新增其他的類型
        case "error":
          this.uiDialog.removeClass("info").addClass("error");
          if (!this.options.title) {
            title.html(" 錯誤");
          } else {
            title.html(" " + this.options.title);
          }
          break;
      }
    }
  }
}));

其中在呼叫jQuery UI Dialog原來的父類別open函數撞牆了，按照網路上的討論是：

$.ui.dialog.prototype.open.apply(this, arguments);

但是這樣會進入一個無限的循環，然後就甚麼都動不了。必須在一開始先將這個父類別函數取出來，再進行呼叫 ：

var _dialogOpen = $.ui.dialog.prototype.open;
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  open: function() {
    _dialogOpen.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  }
========略========
}

fiddle完成範例：

好用，但是問題多多的Chart.js

Chart.js是一個很好用的javascript畫圖表工具，但是他卻有一些奇怪的問題。這麼久了似乎也沒有被解掉。
在這邊紀錄一下目前使用Chart.js遇到的問題：

• 變換圖表資料導致錯亂

當你有一個有使用ToolTip的圖表，而這個圖表的內容需要動態替換時這個問題就會產生，範例如下

當切換圖表的時候，之前的第一個圖表會時不時的出現，擾亂使用者的思緒(只有當滑鼠在圖表上移動的時候會發生這個問題)
解決問題的方式很簡單，我被這個問題困住好久啊！ 解法為 -- 在更換新的資料前，要先執行destroy()，如果不這麼做的話，當使用者在圖表上下了click事件的時候，圖表上的值也會取不到，或是會取到最早那個圖表的資料。看來就是兩個圖表完全重疊在一起了，而且事件還共用。

• 不要使用barValueSpacing

這個問題只會發生在bar chart，因為只有bar chart有這個參數(喂~)，加了這個參數之後在每個bar之間會出現一個間隙，但是這個東西會導致click也會完全出錯，到目前為止1.0.2還是沒有解決

jQuery 1.9之後的attr

今天在寫一個table中tr的click事件，本來想要在某一列上click之後就自動選取前方的checkbox；經過許久的測試後發現事情並不單純，利用以前舊有的attr方法來做竟然發生問題

原來的版本

在這個解法中是利用.attr('checked')來檢查目前checkbox的選取狀態，在第一次run的時候，功能完全正常；但是如果點了第二次他就失靈了，如果利用Chrome developer tool來查看元件，會發現checkbox的後面會忠實地加上checked="checked"這樣的屬性，妙的是checkbox的顯示完全是未選取狀態。

查了jQuery的文件後發現，在jQuery 1.9之後要改用prop，雖然這個在1.6版就有了，但現在看來1.9不用這個會出大問題

http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

修改後的版本

改用prop來檢測目前的checkbox狀態，並且用prop來變更checkbox狀態。這樣就可以正常呈現想要的功能，不過如果再用Chrome developer tool來看的話，會發現checkbox之後的checked ="checked"根本不會改變...
這真是太詭異了

jQuery的droppable問題

最近在改同事寫的網頁，其中有個動態產生droppable div的功能，程式如下：
function createDiv(id){
    item =  '<div id="div_' + id + '">';
    $('#div_map').prepend( item).droppable({
        drop : function(event, ui) {
                $("#div_' + id).hide(); 
                do something ....
        }
    });
}

畫面上還有幾個其他的droppable div，見鬼的是明明動態產生的div是隱藏的，但是當我把dragable的物件拉過去時，他永遠都會觸發我動態新增的最後一個div事件；假如這個func我跑五次，他就會跑到div_5去；這實在是不合理，已經hidden的東西為什麼可以droppable?

測試了好久，感覺應該是物件剛建立就被賦予這個事件出錯，於是改成：


function createDiv(id){
   item =  '<div id="div_' + id + '">';
    $('# div_map ').prepend( item);
    $('#chat_' + id).droppable({
        drop : function(event, ui) {
        $("#div_' + id).hide(); 
            do something ....
        }
    });
}

問題解決！