[jQuery] ie8 元素id與js變數產生衝突

今天程式發生了一個IE8 bug，因使用js來做前端的i18n，但同事有把元素的id取得跟i18n js的變數一樣，導致js錯誤發生。

 HTML
<span id=”stupid_ie_8”></span>

//i18n key
stup_ie_8 = “IE好弱”;

//script
$(“#stupid_ie_8”).html(stup_ie_8);

[jQuery] append function error in IE8

今天被fire一個bug，有關於append元素的時候，畫面沒有被顯示。
主要是append的元素結構沒有正常的結尾，ie8無法自動修正。

一般html頁面元素沒有正常結尾也會空白

[jQuery API] 拍賣倒數計時器 min seconds: 倒數十下

現在所有團購網都流行的倒數計時器方法，參考至某團購網站XD

$(function() {
    setInterval(function () {
  var m = parseInt($('#mis').text());
  //console.log("start m:" + m);
  if (isNaN(m)) {
   $('#mis').text('0');
  } else {
   m=m+10;
   //console.log("m:" + m);
   if (m>=10) { 
    m=m-1;   
    if(m>=10)
    {
     $('#mis').text(m-10);
    }
    else
    {
     $('#mis').text(m);
    }
   } 
  }
 }, 100);//setInterval
 });  

[jQuery plugin] jquery Validator表單驗證器 番外篇(進階一點的需求吧XD)

Validator真是好物呀，先前有整理一個入學篇，覺得篇福愈來愈長了，
遇到的新問題就記在這篇吧!!

Q.如何指定要特地驗證某一個欄位
有時候你只想要透過別的動作來檢查某個欄位，可以使用valid方法，回傳值為1:驗證通過,0:驗證失敗

var validateForMoney = $("#borrowMoney").valid()//1:ok,0:false
$.console("validateForMoney:" + validateForMoney);
var validateForRate = $("#borrowRate").valid();
$.console("validateForRate:" + validateForRate);

Q.取得全部驗證失敗的欄位有哪些?
//透過numberOfInvalids方法就會回傳數字了，$validatedPostBorrow是我驗證器的變數

$.console("invalid fields:" + $validatedPostBorrow.numberOfInvalids());

Reference:
jQuery Validate Plugin - Trigger validation of single field

[Javascript] JavaScript 物件導向的寫法

Javascript物件寫法真是多到爆，希望多看能找出一些寫起來易都跟維護的程式。

順便在這篇記錄一下。

JavaScript 物件導向的寫法

[jQuery plugin] 來個倒數計時器吧

倒數計時器能增加使用者有感的提示XD常用到拍賣商品上的特效。
找了幾個現成的元件
請參考以下這篇網誌的20以上的jQuery countdown plugins (有擷圖)
http://www.tripwiremagazine.com/2012/05/jquery-countdown-scripts.html

[jQuery API] 實作Facebook的捲軸拉到底更新資訊 Facebook like scroll bar detection

如何使用jQuery偵測捲軸的位置！！ 實作Facebook like的更新狀態列記錄

$(function () {
             var $win = $(window);

             $win.scroll(function () {
                 if ($win.scrollTop() == 0)
                     alert('Scrolled to Page Top');
                 else if ($win.height() + $win.scrollTop()
                                == $(document).height()) {
                     alert('Scrolled to Page Bottom');
                 }
             });
         });

Here's some explanation:

$(window).height() - returns height of browser viewport

$(document).height() - returns height of HTML document

$(window).scrollTop() – returns the current vertical position of the scroll bar.

So if the scroll bar is at the very top, the value of $(window).scrollTop() will be Zero. Similarly if the value of the browser viewport + vertical position of scroll bar = document height, then the user has scrolled to the bottom of the page.

寫成外掛的方式來看看!!

[jQuery plugin] Waypoints

幫助你簡單的控制捲軸到指定的位置

http://imakewebthings.com/jquery-waypoints/#documentation

[Javascript] Closure Compiler

在使用yui compressor時遇到編譯失敗的問題，可透過Google closure compiler:http://closure-compiler.appspot.com/home找到檔案為何無法正確編譯(但js與css能正常於網站執行)，錯誤的問題不外乎是語法不嚴僅，如使用到保留字等等。

[Regex] 找出不包含特定字的結果 don't contain specified word

http://www.anydotcom.com/test/search.cfm?metric=blah&selector=size&value=1
http://www.anydotcom.com/test/search.cfm?metric=blah2&selector=style&value=1
http://www.anydotcom.com/test/search.cfm?metric=blah3&selector=size&value=1
http://www.anydotcom.com/test/details.cfm?metric=blah&selector=size&value=1

找出不包含details.cfm這個字的

(^((?!details.cfm).)*$)

Reference:

http://stackoverflow.com/questions/2953039/regular-expression-for-a-string-containing-one-word-but-not-another

[jQuery Plugin] Textbox Mask

蠻屌的TEXTBOX Mask效果 XD

Reference:
http://digitalbush.com/projects/masked-input-plugin/#demo

[jQuery plugin] 簡單的Message Dialog: Messi

Reference:
Demo Page:http://marcosesperon.es/apps/messi/
https://github.com/marcosesperon/Messi

[Java] Jersey @DefaultValue

有時候你的參數是選項輸入的，即可使用 @DefaultValue

public String getOwnerQuoteList(
   
   @PathParam(value="OWP_ID") String OWP_ID,
   @DefaultValue("1") @QueryParam(value="page") int pageIndex,
   @DefaultValue("10") @QueryParam(value="size") int pageSize,
   @DefaultValue("dateline")@QueryParam(value="sort") String sort,
   @DefaultValue("false") @QueryParam(value="asc") boolean asc) throws JSONException{

}

[jQuery] $.ajax 讀取影像

似乎不需要弄$.ajax也可以達到這個需求XD

var img = $("#imgElem").attr('src', 'http://somedomain.com/image.jpg')
                      .load(function() {
                         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                             alert('broken image!');
                         } else {
                             $("#something").append(img);
                         }
                      });

Reference:

http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image

[Java] 快快樂樂使用 Jersey MVC 架構

先前利用jersey都只有在controller端直接將JSON物件轉成字串輸出，
jersey也提供MVC的方式來支援JSP來做template(View)
讓畫ui結構更直覺多了。

[jQuery plugin] Pagination

分頁元件產生 :)，採用的為以下這個jquery pagination
http://www.d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

範例:

$("#pageContainer").pagination(
      total,
      {
       items_per_page:PAGESIZE,
       num_display_entries:10,
       num_edge_entries:2,
       link_to:"javascript:void(0)",
       prev_text:"上一頁",
       next_text:"下一頁",
       callback:function(currentPage,container){
});

其他的分頁
http://blog.ajaxmasters.com/jquery-pagination-plugin/ 
http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

[Javascript] Validate E-mail

驗證信箱格式，讚的次數蠻高的，參考至這篇討論 Validate email address in Javascript?

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 

其他驗證語法 ^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$

[Jersey] Client Post

Form post

MultivaluedMap formData = new MultivaluedMapImpl();
formData.add("name1", "val1");
formData.add("name2", "val2");
ClientResponse response = webResource.type("application/x-www-form-urlencoded").post(ClientResponse.class, formData);

Post JSON
需要注意在post json要這樣使用webResource.type(MediaType.APPLICATION_JSON).post()， 否則會回傳 415 Unsupported media type

public String isExist(
   String parentUUID,
   String objName,
   String alf_ticket){
  
  String response = null;
  
  String apiURL = this.getEndpoint() + "/repo/object/check?ticket=" + alf_ticket;
  
  this.client = Client.create();
  
  //input body
  JSONObject jsonBody = new JSONObject();
  try {
   jsonBody.put("parentUUID", parentUUID);
   jsonBody.put("objName", objName);
  } catch (JSONException e) {
   System.out.println("[RepositoryObject] Fail to create json");
  }
  
  //create resource
  this.webResource = this.client.resource(apiURL);
//  this.webResource.type("application/json");
  
  //do post
  this.clientResp =  webResource.type(MediaType.APPLICATION_JSON).post(
    ClientResponse.class,jsonBody.toString());
  
  //get string of response
  response = this.clientResp.getEntity(String.class);
  
  System.out.println("[RepositoryObject] status:" + this.clientResp.getStatus());
  System.out.println("[RepositoryObject] response:" + response);
  
  return response;
 }

拉UI Prototype的好工具

如果要快速拉出一個ui給客戶看的話，balsamiq可能能幫助你:)
http://www.balsamiq.com/

[jQuery plugin] $.address 快速連按上下頁按鈕

最近實作記錄讓ajax執行後能記錄行為到瀏覽器的上下頁按鈕， 因而選擇了$.address plugin。 原本運作上蠻正常的，不過在Firefox上面快速的連按上或下一頁按鈕時，會造成整個ui畫出來不對的現在。 因為firefox ajax request順序時間差不一致造成，因此在URL Change Event加入Queue即可解決。

 $.address.externalChange(function(event){
//  $.console("[address externalChange] event value:" + event.value);
  var controller = event.pathNames[0];
    var parameter = event.pathNames[1];
    if(!isNullOrUndefiend(controller)){
//     $.console("[address externalChange] Trigger currentFolder:" + currentFolder);
     //2012/07/19
     //When click back button quickly on firefox, 
     //must use queue to avoid duplicated data binding  
     $(this).queue(function(){
      addressEventHandler(controller,parameter);
      $(this).dequeue();
     });
    }else{
     $.console("[address externalChange] Controller not found");
    }
 }); 

Tip:有時候外掛會無法取得externalChange event.value的值，目前還沒找出正確原因。目前直接用變更外部連結的方法處理。

window.location.href = "yourpage.jsp#ControllerName/ + "Parameters";