[Java] Grails Asset pipeline

有關Grails Asset pipeline的簡報介紹 :D

http://tednaleid.github.io/asset-pipeline-presentation/?full#1

[jQuery Plugin] required depends 讓驗證欄位基於其他特地條件成立

如果你使用jquery validator要讓required規則依特地條件成立才驗證的話， 可以使用呼叫的depends方法，並自訂規則:D

$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});

Reference
jquery validate depends rule

[AngularJS] restangular 更方便操作REST API的模組

好像比$resource更進階的REST操作模組，尚未試用過。

https://github.com/mgonto/restangular

[jQuery API] 小心元素undefined的操作，而引起的getAttribute

當操作使用jquery selector操作未定義的物件所引起的getAttribute的錯誤的小地雷


Uncaught TypeError: Cannot read property 'getAttribute' of undefined

var iframe = $("#videoIntro")[0];
       if (typeof(iframe) != "undefined") {
           var player = $f(iframe);
}

[jQuery Mobile] 設定select menu的初始化

想要指定select menu的初始化的話只要設定val就好了，但要記得refresh一下

範例：

  $('#frmAnalytics_ReportGroup').val('avg').selectmenu('refresh');

[jquery plugin] jquery validator 驗證多個選取盒checkbox

常用的需求，怕忘記直接寫個範例記一下。
以下範例介紹如何透過jquery validator來驗證多個checkboxes，
可以透過minlength參數來指定選取數量

HTML

欲代理區域：
                        <input type="checkbox" id="north" name="area" value="north" /> 北部
                        <input type="checkbox" id="central" name="area" value="central" /> 中部
                        <input type="checkbox" id="south" name="area" value="south" /> 南部
                        <input type="checkbox" id="east" name="area" value="east" /> 東部

JS範例

$validatedContact
   = $("#contactForm").validate({
    rules: {

     //共同 checkbox
     area: {
      required: true
      ,minlength: 2
     }
},
messages:{
area: {
      required: "區域未選取"
      ,minlength: "至少選取二個區域"
     }
},
 submitHandler: function(form) {
}
});

結果

[jQuery plugin] 移除已初始化過的jquery validator

今天有一個頁面需求，需求在切換不同type的時候，變更不同的form的顯示的欄位， 為了方便就是重設jquery validator，可以透過以下範例重設form的validator

範例

$("#contactForm").data("validator", null);
  $("#contactForm").unbind("validate");
  $("#contactForm").removeData("validator")
  $("#contactForm").unbind("submit");//必需移除submit的行為，不然會多重綁定

[Javascript] Timer議題: setTimeout 與 setInterval的筆記

最近用timer來實作dashboard相關的機制，順便查一查筆記一下:d

字面上說明

Timeout  ==>逾時
Interval  ==>間隔

定義:

Javascript的計時功能提供了setTimeout與setInterval這兩種用法，執行後會取得一個Timer ID。

要取消計時可以用的分別是clearTimeout()和clearInterval()，然後把執行後取得的Timer ID殺掉即可

兩者差別:

setTimeout()只做一次；setInterval()會不停的的調用函數。

運作原因:

由於javascript是只有單一執行緒，因此只是告訴Js在某一段時間後，再插入執行你指定的函式

[jQuery API] Uncaught SyntaxError: Unexpected token )

今天在綁定jquery click事件時，一直會噴Unexpected token的error XD

原來是綁定原始的超連結tag，的href打錯了!! 眼殘的錯誤

I had:

 id="register_hyperlink" href="javascript:void();">Register an account

I changed it to:

 id="register_hyperlink" href="javascript:void(0);">Register an account

So that explains it :-)

[PHP] 西元日期轉中文年月日

如果有需要將西元日期轉換的話，可以不用拆解字串的方式。
可參考內建的date函數即可

echo date('Y年n月d日',strtotime('2014-11-18')); 

[jQuery API] JSON SyntaxError: Unexpected token s

今天call同事的api，發現http status都是200正確，但都跑到$.ajax的error handler

17 Nov 2014 17:39:07,698 [DEBUG] [frmDeviceMgmt] jqXHR.responsetext: undefined log4javascript.min.js:155
17 Nov 2014 17:39:07,700 [DEBUG] [frmDeviceMgmt] textStatus: parsererror log4javascript.min.js:155
17 Nov 2014 17:39:07,700 [DEBUG] [frmDeviceMgmt] errorThrown: SyntaxError: Unexpected token s

查了一下原來是回傳的JSON格式是驗證錯誤的關係，踩雷共勉之:D

[Javascript] 日期增加運算

常用的增加時間運算函式，有興趣的朋友可以選用。可以自行設定Interval，非常方便:D
Reference: http://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object

 function dateAdd(date, interval, units) {
        var ret = new Date(date); //don't change original date
        switch(interval.toLowerCase()) {
            case 'year'   :
                ret.setFullYear(ret.getFullYear() + units);
                break;
            case 'quarter':
                ret.setMonth(ret.getMonth() + 3*units);
                break;
            case 'month'  :
                ret.setMonth(ret.getMonth() + units);
                break;
            case 'week'   :
                ret.setDate(ret.getDate() + 7*units);
                break;
            case 'day'    :
                ret.setDate(ret.getDate() + units);
                break;
            case 'hour'   :
                ret.setTime(ret.getTime() + units*3600000);
                break;
            case 'minute' :
                ret.setTime(ret.getTime() + units*60000);
                break;
            case 'second' :
                ret.setTime(ret.getTime() + units*1000);
                break;
            default       :
                ret = undefined;
                break;
        }
        return ret;
    }

[Angular Directive] 取代傳統Alert的 ngSweetAlert

ngSweetAlert是基於sweetAlert的套件中的套件XD
比傳統的alert效果美觀太多了，下一個專案再來套用看看 :D

http://oitozero.github.io/ngSweetAlert/#/home

[jQuery Plugin] 時間範圍的Slider元件

想要slider效果的時間選擇器的話，可以試試這個JQRangeSlider

http://ghusse.github.io/jQRangeSlider/demo.html

[AngularJS] Retrieve JSON Data的key與data

一般使用ng-repeat的時候，除了有一般Array的結構之外，
有時API回傳的結果可能需要透過JSON DATA內部的Key結構來綁定。

今天的Case是要綁定一個問卷:D 資料結構長這個


為了讓元素的name id不一致也用了nested ng-repeat如何拿$index的方法，範例如下：

使用ng-init可以將第一層的迴圈$index透過 qTitleIndex取得

    

    <form id="investQuestionnaireForm">
     <div id="investQuestionnaireList"
      ng-controller="MyQuestionnaireCtrl" class="dialog-moduleContent msgBoxDetail">
   <div class="question-list">
    <ul >
     <li ng-repeat="(qTitle, ansList) in questionnaireList"
      ng-init="qTitleIndex = $index">
      <div>{{qTitle}}</div>
      <ul class="answerlist">
       <li ng-repeat="ans in ansList">
        <input type="radio" name="{{qTitleIndex}}_ans_{{$index}}" value="{{ans}}" /> {{ans}} <br/>
       </li>
      </ul>
     </li>
    </ul>

   </div>
     </div>

最後示意
 

[AngularJS] 使用jquery來呼叫Angular scope 方法與更新變數

想在舊的jQuery專案內呼叫Angular的方法與變數，可以在jquery中使用以下方法取得scope

var ngScope = angular.element(document.getElementById('元素ID')).scope();

ngScope即可以操作原本在ng內的方法與變數了，在透過jquery更新完變數後，記得要呼叫$apply來告知Angular裡面的變數的值已改變了!!

參考以下完整範例:

[Javascript] 網路拓樸的函式庫蒐集

由於工作的關係，未來會用到一些呈現網路拓樸的套件，找了以下函式庫。
目前偏好使用jsplumb，網路上的中文資料好像也不是很多。
實作完再來分享

http://sigmajs.org/

http://arborjs.org/

https://github.com/sporritt/jsplumb/

https://github.com/anvaka/VivaGraphJS

Amazon書的
http://www.yasiv.com/amazon#/Search?q=graph%20drawing&category=Books&lang=US

[Raphael.js ] 讓Morrisjs 支援Pie chart與水平bar chart

最近要套用morrisjs這套基於Raphael.js 的畫圖函式庫，發現了缺少了Pie Chart與水平bar chart功能，不過已經有二個fork這專案的人實作了，有興趣的人可以自已把這二個需求合在一起 :D

Pie Chart

https://github.com/tiraeth/morris.js

提供Pie chart的新圖形實作，不過不是merged到最新的master，使用的話，donut chart的hover顯示的文件位置會不一樣

PR Issue:
https://github.com/morrisjs/morris.js/pull/149

Bar Chart

https://github.com/JelteF/morris.js
支援水平的bar chart

[CSS] CSS菜鳥茶包: 讓div的內容置中

測試二個讓Div內的文字可以置中的效果

[jQuery Plugin] 基於 畫佈的jquery 進度條外掛

https://github.com/aterrien/jQuery-Knob