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 »

Annotations

What are annotations? Annotations are meta data in Java. What is meta data? A metadata is data about data. Metadata adds some additional flags on your actual data, and in runtime either you or JVM who understand these flags, can utilize this metadata information to make appropriate decisions based on context. How it looks like? Basic annotation is look like following. @ MyAnnotation It starts with @ sign followed by the Annotation name. Annotations are defined as following. @interface MyAnnotation { } I didn’t get it… Ok, Annotations do basically three things in Java. It provides…. Embed instructions to Java Compiler Embed instructions to Source Code Processing Tools such as IDEs Embed metadata which can be read at runtime by your Java Application or Third Party Tools Lets look at some simple example Below example shows how @Override annotation checks that the annotated method is overridden method. public class DemoClass { //some code @Override public Str...
More »