Skip to main content

Autofill Dynamic Dropdowns Using Spring Jquery Ajax

This explains on how to populate values in a drop down based on a value selected on another drop down. But you can configure it load values dynamically when click on link or any other action performed (based on your requirment)

Include JSTL tag library in your JSP Page 
1
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


Use JSTL to call the required URL path through Spring bindings 
1
<c:url var="findProductForCat" value="/products_ajax.do" />


HTML and EL code to enter in JSP page. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<select class="select-width" id="category_list_d">
<option value="">Select Category</option> 
  <c:forEach var="catList" items="${category_lst}">
   <option value="${catList.categoryId}">${catList.categoryName }</option>
  </c:forEach>
</select>

<select class="select-width" id="product_list_d">
<option value="">Select Product</option> 
</select>


Get data to JSP page after triggering first action using jQuery Ajax
(In this example after Selecting First Drop Down) 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$().ready(
 function() {

  $('#category_list_d').change(
    function() {
     $.getJSON('${findProductForCat}', {
      categoryId : $(this).val(),
      ajax : 'true'
     }, function(data) {
      var html = '<option value="">Select Product</option>';
      var len = data.length;
      
      for ( var i = 0; i < len; i++) {
       html += '<option value="' + data[i].productId + '">'
         + data[i].productName + '</option>';
      }
      html += '</option>';
   
      $('#product_list_d').html(html);
     });
    });

});


Spring Controller Definition when called the mapped URL though JSTL 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
   @RequestMapping(value = "/products_ajax", method = RequestMethod.GET)
   public @ResponseBody
   List<Product> productsForCategory(
     @RequestParam(value = "categoryId", required = true) Integer categoryId) throws IllegalStateException, SystemException {
    
  //Change this as per you requirement to generate values according to business logics 
    ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
   BLProduct objProduct = (BLProduct) context.getBean("bl_product");
   
  //Specify the returning object you want here
    return objProduct.listProductNameByCategoryId(categoryId);
   }
Labels:

Popular posts from this blog

Java Version and New Features 8 - 13

Introduction Introduction Java is widely used staticly typed programming language which is founded over 25 years back. It's almost everywhere from home appliances, mobile devices to industry scale systems. Java is evolving over the time and from Java 8 onwards there were major changes introduced to the language. Below are the list of all the changes on each version. Imperative vs Declarative Programming Imperative approach is defining step by step on HOW we are going to achieve the end result. Declarative approach is describing WHAT we want as the output. Simple example would be a classical for loop in Java which we can call as imperative programming and a select query in sql as declarative programming. ...
More »

Java 5

Java 5 is known as the “ Tiger ” release since it released many of the key features many of the developers used today. Many interview questions are based on this version. Following are the key features introduced in Java 5 Generics Annotations Autoboxing / Unboxing Typesafe Enums Varargs Foreach Loop Static Imports Scanner Class Assertions StringBuilder
More »