[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";

[jQuery API] 指定多重條件的selector (Multiple Attribute Selector)

有時候需要透過多個條件濾掉不需要的元素，
順便記錄一下，方便好查:)
用[]區開就好，以下範例是指綁定No equal的

$("#manage_title").find("div[class!=manage_avatar][class!=manage_action]").click(function(){

});

Reference:
http://api.jquery.com/multiple-attribute-selector/

[jQuery api] Stop ajax

如何停止執行中的ajax的request，在執行ajax呼叫後，會回傳一個instance，再透過abort即可停用。

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

然後再把request abort即可

request.abort();

[jQuery plugin] Validator 驗證多個Radio跟checkbox範例

今天遇到要檢查多個checkbox至少要選一下就順便記錄一下。
只要將你的checkbox內的name屬性設為 <你取的名字>[]，
如下範例 candidate_usr[]，記得要加上陣列的符號[]

 $("#candidateForm").validate({
    rules:{
     'candidate_usr[]':{
      required:true
     }
    },
    messages:{
     'candidate_usr[]':{
      required: "請至少選擇一名委託者"
     }
    },
    submitHandler: function(form) {
     //get candicates 
     var $checkboxes 
      = $("#candidateForm").find("input:checkbox:checked").each(
       function(i,cbObj){
        var selectedExpertID = $(cbObj).val();
        $.console("selected id:" + selectedExpertID);
       });
    
    }
  });

Reference:
http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html

[JavaScript] 驗證物件為null或undefined

如果檢查物件是否為null或undefined

if(typeof(foo) !== 'undefined' && foo != null) {
    //you can use foo!
}

[Alfresco] 實作alfreso javabacked 上傳心得 How to upload file using java backed web script

本文記錄使用Java API實作上傳的測試心得
上網找到的取得HttpServletRequest 都不適用於alfresco 3.4.5版本

// NOTE: This web script must be executed in a HTTP Servlet environment
//        if (!(req instanceof WebScriptServletRequest)) {
//                throw new WebScriptException(
//                                "Content retrieval must be executed in HTTP Servlet environment");
//        }
     
// HttpServletRequest httpReq = ((WebScriptServletRequest)req).getHttpServletRequest();

發生錯誤如下: ClassCastException

protected Map<string, object> executeImpl(
   WebScriptRequest req,
   Status status, 
   Cache cache) {
WrappingWebScriptRequest wrappingWebScriptRequest = (WrappingWebScriptRequest) req;
  WebScriptRequest webScriptRequest = wrappingWebScriptRequest.getNext(); 
  WebScriptServletRequest servletRequest = (WebScriptServletRequest) webScriptRequest;
  FormField uploadFile = servletRequest.getFileField("file");
  //file field     
  uploadFileName = uploadFile.getFilename();
     uploadMIMEType = uploadFile.getMimetype();
     uploadContent = uploadFile.getInputStream();
     System.out.println("[form data] filename:" + uploadFileName);
     System.out.println("[form data] mimetype:" + uploadMIMEType);
//do something
}

用以下這段程式就能正常取得上傳檔案了，先前的中文問題出在client指定錯誤編碼了，繞了一大圈竟然是手誤呀!!

  

//how to get WebScriptServletRequest
  WrappingWebScriptRequest wrappingWebScriptRequest = (WrappingWebScriptRequest) req;
  WebScriptRequest webScriptRequest = wrappingWebScriptRequest.getNext(); 
  WebScriptServletRequest servletRequest = (WebScriptServletRequest) webScriptRequest;
  
  //get data form form
  FormData formData = (FormData)servletRequest.parseContent();
  FormData.FormField[] formFields = formData.getFields();
  int fieldsLen = formFields.length;
  for(int i=0;i

如果要做更複雜的行為不在這篇的討論範例 :)