jQuery AJAX on IE does not reflesh

If you use jQuery to implement the AJAX functionality, especially use the "get", "getJSON" and "load", would you encounter one problem on IE, "Ajax" does not really call backend link, but return value immediately".

The problem is the cache of IE. If we use "Get" method to get data from backend, and the parameters are the same, IE won't really get the data. In contrast, FF does not have this problem. The solution is to set cache to false.

$.ajaxSetup({cache: false});
$.get("xxx.jsp",{A=a,B=b},function(){
    
});

Or, add a parameter with date.

$.get("xxx.jsp",{timestamp:new Date().getTime()},function(){
    
});

jQuery Html table manipulation

• Dynamic get the content of the table

JSON data(json.js):


[{"AGE":"18","NAME":"Austin"},{"AGE":"20","NAME":"Leo"},{"AGE":"16","NAME":"Ting"}]


You could visit JSON website for reference.
Get ready for the skeleton.


< table id="table1" width="200" border="1">
   < tr>
       < td width="30">& nbsp;< /td>
       < td width="100">Name< /td>
       < td>Age< /td>
   < /tr>
< /table>


Insert data:


$.getJSON("./json.js",{},function(json){
    var i = 0;
    $.each(json, function(){
        $("#table1 tr:last").after(""+i+""+$(this).attr("NAME")+""+$(this).attr("AGE")+"");
        i++;
    });
    $("#table1").fadeIn("slow");
});




• Add New Row from First



$("#table1 tr:first").after('< tr>< td>& nbsp;< /td>< td>& nbsp;< /td>< td>& nbsp;< /td>< /tr>');




• Add New Row from Last



$("#table1 tr:last").after('< tr>< td>& nbsp;< /td>< td>& nbsp;< /td>< td>& nbsp;< /td>< /tr>');




• Remove Row from First



if($("#table1 tr").length == 1){
    alert("You can't delete it anymore!!");
}else{
    $("#table1 tr:gt(0):first").remove();
}




• Remove Row from Last



if($("#table1 tr").length == 1){
    alert("You can't delete it anymore!!");
}else{
    $("#table1 tr:last").remove();
}




• Change the Background of Row



$("#table1 tr:gt(0):odd").css({background:"#DDDDDD"});
$("#table1 tr:gt(0):even").css({background:"#FFFFFF"});

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
身份證字號規則

jQuery Tips

• select



//Empty options
$("#select1").empty();

//Get Text
$("select[name='select1'] option[selected]").text();      //1.3 +
$("select[@name='select1'] option[@selected]").text();    //1.2.6 -
$("#select1 :selected").text();
$("#select1").text(); //This will get all the options

//Get Value
$("select[name='select1'] option[selected]").val();    //1.3 +
$("select[name='@select1'] option[@selected]").val();    //1.2.6-
$("#select1").val();
$("#select1 :selected").val();

//Set Value -> By value (If value is 0)
$("#select1").attr("value","0");

//Set Value -> By index -> the second element
$("#select1")[0].selectedIndex = 1;

//Count the options of select
alert($("select[name='select1'] option").length);    //1.3 +
alert($("select[@name='select1'] option").length);    //1.2.6 -




• radio button



//Get Value
$("input[name='radio1'][checked]").val();    //1.3 +
$("input[name='@radio1'][@checked]").val();    //1.2.6 -

//Set Value -> By value (If value is radio_0)
$.each($("input[name='radio1']"),function(){    //1.2.6 - => @name
    if($(this).val() == "radio_0"){
        $(this).get(0).checked = true;
    }
});

//Set Value -> By index -> the second element
$("input[name='radio1']").get(1).checked = true;    //1.2.6 - => @name




• checkbox



//select All
$(":checkbox[name='checkbox_1']").attr("checked","checked");    //1.2.6 - => @name

$.each($("input[name='checkbox_1']"),function(){    //1.2.6 - => @name
    $(this).attr("checked",true);
});

//unselect All
$(":checkbox[name='checkbox_1']").attr("checked",false);    //1.2.6 - => @name

$.each($("input[name='checkbox_1']"),function(){    //1.2.6 - => @name
    $(this).attr("checked",false);
});