偵測瀏覽器的 scrollbar 位置

有些網頁太長或太寬時，會想把某些東西固定在某個位置
在 jQuery 中已經有包裝好的函式 scrollTop() 和 scrollLeft()，可以簡單地做到偵測的動作。

檢查元件是否顯示

想要檢查某個元件是否能夠被看見，可以透過檢查它有沒有帶有 ":visible" 屬性來做到。

$(element).is(":visible")

不過因為隱藏的方法好像有好幾種，印象中不是每種方法都有 ":visible"
所以可能有些狀況要用別的方法檢查。

參考資料：
1、Testing if something is hidden with jQuery

判斷捲軸位置的 jQuery plugin：waypoint

參考資料：
1、jQuery waypoint

概念上蠻簡單的，waypoint 就是指定某個標籤
當指定標籤出現在瀏覽器的可視範圍內時，該標籤的 waypoint 事件就會觸發～
如果要像 Facebook 一樣讀新資料時，就可以在這個時候送 ajax call 去讀新資料
然後 append 到顯示資料的標籤上～。

jQuery 處理 checkbox 多選

在可以多選的 checkbox 欄位，在網路上可以找到一些利用 jQuery 的 selection 篩選的方法
但是我試起來好像都有點怪怪的～
例如是有看到有人分享的 selection 方法可以直接檢查 "checked" 這個屬性
但是我的測試好像沒有用：

$("input[name='multi_choice'][@checked]").each(function(value, element) {
　　console.log("element: " + $(element).attr("checked"));
});

這樣的程式碼在我的測試裡會全部的 checkbox 都被選到..。
後來查到 [2] 的寫法，就可以順利取道被選取的 checkbox 了。

自行觸發 jQuery Validation 的表單驗證

這是個無聊的記錄 XD
當遇到有任何需要，必須強制由程式碼自行觸發 validator 的驗證事件時
可以直接呼叫 valid() 函式，同時 valid() 會回應驗證結果（true/false）。

$("#form").valid();

參考資料：jQuery Validation

在 jQuery 檢查 checkbox 的點選狀態

用 jQuery 一般要檢查一個 checkbox 是不是有被點選
通常都直接檢查有沒有 checked 屬性，範例如下：

$(function() {
　　$("#checkbox").change(changeEventForEnabled);
});

function changeEventForEnabled() {
　　if($("#checkbox").attr("checked")) {
　　　　$("#text").removeAttr("disabled");
　　}
　　else {
　　　　$("#text").attr("disabled", true);
　　}
}

上面的目的是當 id="checkbox" 的元件被點選時，會把 id="text" 的欄位開啟（刪除 disabled 屬性）
反之則是把 id="text" 的欄位關閉（刪除 disabled 屬性）

jQuery 讀取 JSONArray 的方法

一般透過 $.ajax 送 JSON 格式的資料給後端處理
後端回應一個 JSON 回來，都可以直接用 .xxx 來存取回應的 JSON
例如回應的 JSON 是 {"statuscode", 200}
可以直接用：

$.ajax({
　　type: "GET",
　　url: endpoint,
　　contentType: "application/json",
　　dataType: "json",
　　success: function(data){
　　　　consile.log("statuscode: " + data.statuscode);
　　},
　　error: function(){
　　　　unblock(); // TODO
　　}
});

這樣在 FireFox 的 FireBug 中就會跑出：「statuscode: 200」的記錄。

當回應的 JSON 是個巢狀的 JSON array 時，則處理方式稍微複雜一點點

jQuery validate 套件：觸發驗證的事件

jQuery validate 預設的事件很奇妙
使用者按過一次 submit 觸發驗證以後，再回去改欄位內容
欄位內容就會每次 onChange 的時候都會觸發驗證
但因為有時候驗證是要送 AJAX 去給伺服器檢查
我們就不會很希望使用者每按一個鍵都會送一次 request
這樣當使用者一多的時候，或者是有人開機器人在亂按時
伺服器有可能會被這些訊息塞爆掉....

jQuery validate 套件的多國語言：更換 message 內容

在我們的專案中，由於語言資料已經寫在特定的檔案內
因此似乎不適用 jQuery validate 套件內建的 localization 方法
（我查到的資料好像都是說要把 message 寫在指定的 message.js 裡？）

要讓 error message 跟著使用者選取的語言更換，容易想到的可能作法有三種：
1、更換語言時讓整個網頁重新整理。
2、更換語言時把 validate 套件的 message dictionary 內容置換掉。
3、重新初始化 validate 套件。

其中 1 被主管打槍，主管要求我們不准重新整理網頁
2 找不到方法...（其中 disctionary 這個概念是搜尋時看到有人這麼說的，實際上我原本一直以為 validate 套件是需要時即時去讀字串的）
3 就是本篇的重點了～雖然是個笨一點的方法，但總是能夠做到效果....

jQuery 表單驗證的常見錯誤

這是我自己在放 validate 時沒效果，花了很多時間 debug 以後發現的幾種蠢原因...

1、$(" ").validate 必須放在 $(function(){ .... }); 內，例如：

$(function(){
　$(" ").validate( .... );
}

放在 $(function() { }); 之外的話會因為沒有被初始化，所以不會真的生效，按下 submit 按鈕就會變成沒有指定 method 和 target 的 submit 了。

2、頁面要引用 jquery.validate.js。有時候讀不到語言檔好像也可能是因為忘了引用函式庫的關係。

3、輸入的欄位們跟 submit 按鈕必須夾在 <form> .... </form> 之間。這其實我不是非常確定，但之前測試時 submit 放在 </form> 之後就沒辦法觸發 $("form").submit() 了，所以自然也不會跳進驗證。

4、變數名稱記得改.................因為驗證的程式碼常常是複製貼上的！XD

5、validate 套件看的是 name 屬性，所以需要被驗證的欄位一定都要有 name 屬性。

6、validate 觸發方法是表單被送出 (submit) 的時候觸發，所以如果 submit 按鈕是由 JavaScript 觸發，要記得加上 form 的 submit 事件 (例如 $("#form_name").submit(); )。

附帶基本使用教學：jQuery教學－jQuery.validate萬用表單驗證元件直接套用

jQuery 取得 GET 變數的方法

參考資料：Get URL parameters & values with jQuery

上面那篇文章是自己做函式取得 URL 再拆字串
也許 jQuery 本身並沒有提供函式取得？
程式碼如下 (跟上面文章內的 code 一樣)：