albert's blog: Building DropDown Menu Using jQuery and JSON

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

albert's blog

Total Pageviews

2011/07/25

Building DropDown Menu Using jQuery and JSON

No comments: