albert's blog: jQuery

Showing posts with label jQuery. Show all posts

2012/03/08

Autotab: jQuery auto-tabbing and filter plugin

Requirement

We have five input text fields in this page.

As we filled in 3 characters in dlv_unit(移送單位), system should automatically set focus to tax_cd(稅別).
As we filled in 2 characters in tax_cd(稅別) , system should automatically set focus to dlv_yr(移送年度).
As we filled in 3 characters in dlv_yr(移送年度) , system should automatically set focus to flg_tp(申報年度).
As we filled in 1 characters in flg_tp(申報年度), system should automatically set focus to serial_no(流水號).

Introduction

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.

Download

jQuery Autotab Plugin v1.1b (1867021)

Basic Usage

1. Include jquery.autotab.js in your HTML:
2. Add your text fields in your HTML, including an ID:

3. Initialize Autotab on your text fields with a ready() handler:

2011/09/09

Checkbox/Radio Button filters with jQuery

Scenario
當使用者輸入查詢條件，並按下查詢按鈕，系統會自動將符合條件的資料呈現於data grid中，使用者選擇某筆資料，點選查詢

當使用者點選查詢後，系統會將資料庫的資料帶入dialog中：

系統會根據欄位值來決定radio button要預設選擇哪一個，以及決定checkbox是否要打勾

Radio button

原本的寫法：

採用filter的寫法：

Checkbox

原本的寫法：

採用filter的寫法：

有關filter的文件，請參考：http://api.jquery.com/filter/

2011/08/12

Install jquerywtp to Make Eclipse WTP's JavaScript Content Assistance Support jQuery

1. Go to download jar file, jqueryWTP1.00foEN.jar, from http://code.google.com/a/eclipselabs.org/p/jquerywtp/downloads/list

2. execute java -jar jqueryWTP1.20foEN.jar in command line

3. Jar File --> Browse --> Choose org.eclipse.wst.jsdt.core_1.1.4.v201102102045.jar

4. Output Dir --> Browse

5. Click Generate Button

6. You can get new jar file, org.eclipse.wst.jsdt.core_1.1.4.v201102102045.jar, in C:\

7. Overwrite jar file in eclipse\plugins

8. Then restart eclipse with -clean to clear plug-in cache.

9. Check the result

Remember to remove -clean after you launch eclipse

2011/07/28

Using jQuery and Ajax to load sub-sections of a webpage

Ajax powered tab sets

Tabs can; broadly-speaking, be loaded in three different ways:

Immediately loaded – i.e. when the webpage has loaded, it is the default selected tab.
Later (deferred loading) – i.e. after the user clicks a tab, go off to the server and retrieve the contents of a tab, or
Lazy loading – e.g. load in the background before the user clicks a tab. This enhances the user experience as the contents of a tab are immediately shown, but on the flip side means requires more traffic and the user may never click the tab anyway, effectively wasting bandwidth.

In this case, we choose the third approach to implement (Lazy loading)

Scenario

We have four tabs in our page, the screen shots are as bellowing:

Solution

Here’s a javascript (using jQuery) implementation of the above which supports "lazy loading"

nig.nig451w.js


$(document).ready(function() {
$( "#tabs" ).tabs();
}

JSP relationships

Then the next thing to do is to add some HMTL to the page to act as tabs:

WELL DONE!

2011/07/25

Building DropDown Menu Using jQuery and JSON

Scenario
We have six dropdown menus where we populate violation number (違章編號) and will be triggered on onBlur event.

Screenshot

jQuery
jQuery is a light weight JavaScript library that simplifies the client side DOM manipulation, event handling, ajax communication easier and faster.

JSON
JSON means JavaScript Object Notation. It is a simple text based, human readable data format that is widely used in AJAX application to transfer data as an alternative to XML format. In simple words, it is simply key- value pairs, separated by commas and enclosed in curly braces.

NIG451W.jsp

nig.nig451w.js

Sequence Diagram

NIG451Controller.java

  @Controller
  @RequestMapping("/front/NIG451W")
  public class NIG451Controller extends AbstractController {
      @SuppressWarnings("unused")
      @RequestMapping(value = "/autoCompleteDropdownMenu", method = RequestMethod.POST)
      private @ResponseBody
      void autoCompeleteDropdownMenu(final NIG451DataBean formBean,
      final HttpServletResponse response) throws FDCDefineException,
      IllegalAccessException, InvocationTargetException, IOException {
          //setup primary key
          Nigt001PK nigt001PK = new Nigt001PK(formBean.getDlvUnit(),
          formBean.getTaxCd(), formBean.getDlvYr(), formBean.getFlgTp(),
          formBean.getSerialNo());
          //do query based on the search criteria
          List nig451Beans = nig451Manager.autoCompeleteDropdownMenu(nigt001PK);
          
          JSONArray jsonArray = new JSONArray();
          
          for(NIG451Bean vo : nig451Beans){
              Map map = new HashMap();
              map.put("name", vo.getVioOrgNm());
              map.put("value", vo.getVioOrgCd());
              jsonArray.add(map);
          }
          
          response.setContentType(NigAccessKey.JKEY_CONTENT_TYPE);
          response.getWriter().write(jsonArray.toString());
      }
  }

NIG451ManagerImpl

  @Service
  public class NIG451ManagerImpl implements NIG451Manager {
      /*
      * (non-Javadoc)
      * @see gov.fdc.nig.punishment.service.NIG451Manager#autoCompeleteDropdownMenu(gov.fdc.nig.domain.Nigt001PK)
      */
      @Override
      public List autoCompeleteDropdownMenu(Nigt001PK nigt001pk) {
          return nigt001Dao.autoCompeleteDropdownMenu(nigt001pk);
      }
  }

Demo

2011/07/22

Building Auto-Completion Using jQuery and JSON

Scenario

As I filled in violation number, system should fill out its related column on onBlur event of violation number(違章編號). [it will return single value, i.e. a Java bean class]

Sequence Diagram

How to do it

nig.nig451.js: will be triggered on onBlur event

  $(document).ready(function() {
      //略....
      $("#vioNumDlg").blur(function() {
       
         $.ajax({
           url: 'NIG451W/autoComplete',
           type: gsAjaxPost,
           data: formData,
           dataType: gsAjaxJson,
           contentType: gsAjaxContentType,
           //略...
           });
      });
  });

NIG451Controller: will be triggered when doing post over 'NIG451W/autoComplete' url pattern

   @RequestMapping(value = "/autoComplete", method = RequestMethod.POST)
   private @ResponseBody
   void autoCompletForm(final NIG451DataBean formBean,
                        final HttpServletResponse response) throws FDCDefineException,
                        IllegalAccessException, InvocationTargetException, IOException {
       //primary key
       Nigt001PK nigt001PK = new Nigt001PK(formBean.getDlvUnit(),
       formBean.getTaxCd(), formBean.getDlvYr(), formBean.getFlgTp(),
       formBean.getSerialNo());
       
       //service class will search by primary key and return a POJO class
       NIG451Bean result = nig451Manager.autoCompleteForNIG451(nigt001PK);
       
       //instantiate JSONObject object, and set result to it.
       JSONObject json = new JSONObject();
       json.put("result", result);
       
       //write json string to HttpServletResponse
       response.setContentType(NigAccessKey.JKEY_CONTENT_TYPE);
       response.getWriter().write(json.toString());
   }

nig.nig451.js:

   $(document).ready(function() {
       //略....
       
       $("#vioNumDlg").blur(function() {
           //略....
           $.ajax({
               url: 'NIG451W/autoComplete',
               type: gsAjaxPost,
               data: formData,
               dataType: gsAjaxJson,
               contentType: gsAjaxContentType,
               success: function(jsonResult, status) {
                   //get values from json result
                   //syntax: jsonResult.[key value we set in JSON].[bean class attribute]
                   $("#manageCd").val(jsonResult.result.manageCd);
                   $("#vioYr").val(jsonResult.result.vioYr);
                   $("#vioHostNm").val(jsonResult.result.vioHostNm);
                   $("#vioHostIdnBan").val(jsonResult.result.vioHostIdnBan);
                   $("#respNm").val(jsonResult.result.respNm);
                   $("#respIdn").val(jsonResult.result.respIdn);
                   $("#respAddr").val(jsonResult.result.respAddr);
               },
               error: function(xhrInstance, status, xhrException) {
               }
           });
       });
   });

NIG451W.jsp

Check the result

2011/07/07

meioMask – a jQuery mask plugin

Motivation

I would like to find a jQuery plugin for handling input mask for inputting violation number(違章編號).

Solution

Go to download meioMask, http://www.meiocodigo.com/projects/meiomask/, to use.

It's very easy to use, and is compatible with :

Firefox2, Firefox3, Firefox3.5 (Win, Mac, Linux);
IE6, IE7, IE8 (Win);
Chrome (Win, Mac, Linux);
Safari3.2, Safari4 (Win, Mac, iPhone, yes, it supports iPhone!);
Opera (Win, Mac, Linux).

How to do it

1. download and copy jquery.meio.mask.js to src/webapp/js

2. import jquery.meio.mask.js into your jsp page


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cui" uri="http://fdc.gov/jsp/taglib/commonui" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="<c:url value="/res/js/nig/nig.nig451w.js"/>"></script>
<!-- import jquery.meio.mask.js -->
<script type="text/javascript" src="<c:url value="/res/js/jquery.meio.mask.js"/>"></script>

3. insert input text field for violation number


 <cui:portlet titlekey="nig451.title" align="center">
     <table class="table-redmond-left" width="98%">
      <tr>
    <th style="width: 150px;"><cui:msg key="nig451.vioNum" />
    </th>
    <td><input id="vioNum" name="vioNum" type="text" alt="vioNum"/></td>
   </tr>
   .....
  </table>
    </cui:portlet>

4. edit js file, and define input mask for violation number (違章編號)


//文件載入完成後執行
$(document).ready(function() {
 ...
 //define input mask for violation number
  $("#vioNum").setMask('999-99-999-9-99999');
});

5. check the result

Total Pageviews