Dynamic double combo implementation by jQuery, JSON and Java

About the "Dynamic Double Combo", I wrote it before by using DWR. And now I don't think using DWR is a good idea. If your project is combined by frameworks, like Struts, Spring ...etc. To maintain the all xml configuration files will cost lots of time.

In this example, I use jQuery, and the jQuery plugin jQuery - Select box manipulation, JSONObject, and the basic Java Servlet.

In web.xml, add these period of codes.

    HelloServlet
    HelloServlet


    HelloServlet
    /Hello

About the JSP file, remember to make the encoding consistent with the servlet.
And we have to include two javascript files, "jquery-1.2.6.min.js" and "jquery.selectboxes.pack.js". Please ignore the ".".

<%@ page language="java" pageEncoding="UTF-8"%>

< html>
< head>
    < title>Dynamic double combo< /title>
    < meta http-equiv=content-type content="text/html; charset=UTF-8">
    < script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js">< /script>
    < script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.selectboxes.pack.js">< /script>
    < script type="text/javascript">
        $(document).ready(function(){
            $("#select1").change(function(){
                $("#select2").empty();
                $("#select2").addOption("0","------");
                $("#select2").ajaxAddOption("<%=request.getContextPath()%>/Hello",
                        {selVal:$("select[name='select1'] option[selected]").val()},false);
            });
        });
    < /script>
< /head>
< body>
< select id="select1" name="select1">
    < option value="A">A< /option>
    < option value="B">B< /option>
    < option value="C">C< /option>
< /select>
< select id="select2" name="select2">
    < option value="0"> --- < /option>
< /select>
< /body>
< /html>

HelloServlet.java

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;

public class HelloServlet extends HttpServlet{

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException{

        try{
            String val = request.getParameter("selVal");
            JSONObject obj = new JSONObject();
            if(val.equals("A")){
                obj.put("A-1", "A-1");
            }else if(val.equals("B")){
                obj.put("B-1", "B-1");
            }else if(val.equals("C")){
                obj.put("C-1", "C-1");
            }
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().print(obj.toString());
            return;
        }catch(Exception e){
            e.printStackTrace();
        }
    }
}

「海角七號」觀後感

電影剛出時，實在是沒什麼感覺，印象中的國片，不是沒內容，就是高深到看不懂。

不過隨著口碑傳出，一面倒的讚揚聲響起，票房屢創新高，卻激起了我的好奇心，到底是什麼片子啊，誇張的是，連網路論壇都禁止會員分享，這下可好，百年難得一見，就當是我湊熱鬧，三個星期前的星期五就去信義威秀排隊買票，我下午六點到售票窗口，想買七點的場次，小姐居然跟我說，九點四十才有座位，我當場傻眼，雖然很不情願，還是放棄，不過心裏默想，你好樣的，老子看賣座洋片都沒遇到過這種情況。

三個禮拜後又去威秀，看來人潮已逐漸散去，因為沒看過的人在台灣已算是少數了。

電影要賣座，媒體的強勢露出已不是萬靈丹，口耳相傳類似老鼠會的感染，才是會造成票房的一飛沖天。

來談談電影的內容吧，"真實"是我第一個感想，很貼近生活，感覺就像是發生在週遭的故事，"驚喜"，一般的市井小民，像是警察、賣酒的業務甚至是修機車的黑手，還有不可不提的郵差國寶，居然都是道道地地的音樂人。

我最感動的一幕，是在演唱海角七號(國境之南)的時候，中間阿嘉停了下來，勞馬將孔雀之珠給了友子，她戴上時，眼中泛著淚光，那種眼神，就是訴說著"我愛你"，此幕的穿透力極盡強勁之能事，我想我深深地愛上友子了。

jQuery plugin : Taiwanese ID Checker 身分證字號檢查器

/*
    Program: Taiwanese ID Checker
    Author: Austin, Cheng-Chun Chang
    Blog: http://austinccc.blogspot.com
*/
jQuery.fn.checkId = function(){
    var moduleCnt = 10;
    var inputId = $.trim($(this).val()).toUpperCase();
    if(inputId.length != moduleCnt){ //If the length is not 10, return false
        return false;
    }else{
        var str = new Array(moduleCnt);
        switch(inputId.substring(0,1)){
            case 'A':
                str[0] = "1";
                str[1] = "0";
                break;
            case 'B':
                str[0] = "1";
                str[1] = "1";
                break;
            case 'C':
                str[0] = "1";
                str[1] = "2";
                break;
            case 'D':
                str[0] = "1";
                str[1] = "3";
                break;
            case 'E':
                str[0] = "1";
                str[1] = "4";
                break;
            case 'F':
                str[0] = "1";
                str[1] = "5";
                break;
            case 'G':
                str[0] = "1";
                str[1] = "6";
                break;
            case 'H':
                str[0] = "1";
                str[1] = "7";
                break;
            case 'I':
                str[0] = "3";
                str[1] = "4";
                break;
            case 'J':
                str[0] = "1";
                str[1] = "8";
                break;
            case 'K':
                str[0] = "1";
                str[1] = "9";
                break;
            case 'L':
                str[0] = "2";
                str[1] = "0";
                break;
            case 'M':
                str[0] = "2";
                str[1] = "1";
                break;
            case 'N':
                str[0] = "2";
                str[1] = "2";
                break;
            case 'O':
                str[0] = "3";
                str[1] = "5";
                break;
            case 'P':
                str[0] = "2";
                str[1] = "3";
                break;
            case 'Q':
                str[0] = "2";
                str[1] = "4";
                break;
            case 'R':
                str[0] = "2";
                str[1] = "5";
                break;
            case 'S':
                str[0] = "2";
                str[1] = "6";
                break;
            case 'T':
                str[0] = "2";
                str[1] = "7";
                break;
            case 'U':
                str[0] = "2";
                str[1] = "8";
                break;
            case 'V':
                str[0] = "2";
                str[1] = "9";
                break;
            case 'W':
                str[0] = "3";
                str[1] = "2";
                break;
            case 'X':
                str[0] = "3";
                str[1] = "0";
                break;
            case 'Y':
                str[0] = "3";
                str[1] = "1";
                break;
            case 'Z':
                str[0] = "3";
                str[1] = "3";
                break;
            default:
                //not characters, return false
                return false;
        }
        for(var i = 2; i < moduleCnt; i++){
            str[i] = inputId.substring(i-1,i);
        }
        var sum = parseInt(str[0]) * 1;
        for(var i = 9; i > 0; i--){
            sum = sum + (i * parseInt(str[moduleCnt - i]));
        }
        if((moduleCnt - (sum % moduleCnt)) == parseInt(inputId.substring(moduleCnt-1,moduleCnt)) || 
                (sum % moduleCnt) == parseInt(inputId.substring(moduleCnt - 1, moduleCnt))){
            return true;
        }else{
            return false;
        }
    }
}

How to use:

    $(document).ready(function(){
        $("#hi").click(function(){
            if($("#custId").checkId()){
                alert("ID is correct!!");
            }else{
                alert("ID is NOT Correct!!");
            }
        });
    });

If you would like to understand the rule, you could visit
身份證字號規則