Bootstrap 筆記 - 讓 table 以 <tr> 為單位支援 click event

這功能其實不難，但順手筆記一下自己選的解法：

<table class="table table-striped table-hover">
<thead>
<tr>
<td cols="3">
<img class="img-responsive" src="something"/>
</td>
</tr>
</thead>
<tbody>
<tr data-href="link">
<td>Data1</td>
<td>Data2</td>
<td><a href="link">Data3</a></td>
</tr>
</tbody>
</table>

搭配 Javascript(jQuery):

<script>
$(document).ready(function() {
$(".table > tbody > tr").css('cursor', 'pointer').click(function() {
var link = $(this).data("href").trim();
if (link.length > 0)
window.document.location = link;
return false;
});
});
</script>

簡單的說，就是在某個 <td> 欄位裡埋入 <a> tag，但在 <tr> 裡的屬性多個 data-href 來記錄，最後再用 Javascript 埋入 <tr> click event。

看起來好像多埋了 <a> tag ，其主因是為了 SEO。

[Javascript] 使用 AJAX/jQuery 與 JSONP/Callback 處理跨 domain 問題

很久沒寫 ajax 了 :P 由於機器整合不易？所以 API 就是要跨網域多台機器要互動。至於原理可以看看 wiki JSONP 簡介，在此筆記一下 Server Site 跟 Client Site 的用法

Server Site API 支援 JSONP 使用模式:

假設 API 輸出結果為 {"status":true} 的 JSON 格式，改成多一個 function name 來包裝: callbackFunc({"status":true})

例如：

$ wget -qO- http://example.com/api
{"status":true}

$ wget -qO- 'http://example.com/api?mycallback=HelloCallback'
HelloCallback({"status":true})

Client Site:

<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'jsonp' ,
jsonpCallback: 'HelloCallback',
url: 'http://example.com/api',
data: 'mycallback=HelloCallback',
success: function(data) {
console.log(data);
}
});
});
</script>

若 Server Site 用的參數剛好是 callback 的話：

$ wget -qO- http://example.com/api
{"status":true}

$ wget -qO- 'http://example.com/api?callback=HelloCallback'
HelloCallback({"status":true})

那 Client Site 可以化簡成：

<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'jsonp' ,
url: 'http://example.com/api',
success: function(data) {
console.log(data);
}
});
});
</script>

可以用 Chrome Browser 觀看 jQuery 發出的 Requests 長什麼樣子，主因是 jQuery 預先幫忙包好了。

[Javascript] JQuery UI - Uncaught TypeError: Object function (a,b){return new n.fn.init(a,b)} has no method 'curCSS' @ JQuery 1.11.0

最近在用某個 open source 時，他的開發是用 jQuery 1.5.x 系列 ，但一用最新版 jQuery 1.11.0 時，就會蹦出這個錯誤訊息，找了一下應該是用了 non-stable  API 吧？

解法：

<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script>
    jQuery.curCSS = jQuery.css;
</script>

雖然解法不是很好 XD 但對於使用 open source 而言，可以降低維護問題，也算是無可厚非的吧。