I have a web jsp web application. In one page I need two dropdownlist. When I will select a value from dd1 then second dropdown will be fill according this value. How I can call java function from dropdown 1 change event in javascript or jQuery?

I got example but that is calling jsp page but I need to java method and send parameter what i got from dropdown1

This is my dropdown dd1. So if I select tom I have to related information of tom in dd2.

            <td>
              <select  id="dd1">
                    <option value="1">john</option>
                    <option value="2">Tom</option>
              </select>

          </td>
        </tr>
        <tr>
          <th> Projects </th>
          <td>

              <select id="dd2">
                    <option value="1">pp1</option>
                    <option value="2">pp2</option>
              </select>

          </td>

I have following code

$(function () {
    var ddVal = '';
    var dropdown = document.getElementById("dd1")
    $(dropdown).focus(function () {
        ddVal = $(this).val();
        }).blur(function () {
        if (ddVal == $(this).val()) {
            $(this).change();
        }
    }).change (function () {

});

For change event of dd1. But I don't know how to call java method from jQuery.

In my application I have a java class where there is a method which return list that I need to load in dd2 dropdown.

Can anyone help me regarding this issue?

I have a web jsp web application. In one page I need two dropdownlist. When I will select a value from dd1 then second dropdown will be fill according this value. How I can call java function from dropdown 1 change event in javascript or jQuery?

I got example but that is calling jsp page but I need to java method and send parameter what i got from dropdown1

This is my dropdown dd1. So if I select tom I have to related information of tom in dd2.

            <td>
              <select  id="dd1">
                    <option value="1">john</option>
                    <option value="2">Tom</option>
              </select>

          </td>
        </tr>
        <tr>
          <th> Projects </th>
          <td>

              <select id="dd2">
                    <option value="1">pp1</option>
                    <option value="2">pp2</option>
              </select>

          </td>

I have following code

$(function () {
    var ddVal = '';
    var dropdown = document.getElementById("dd1")
    $(dropdown).focus(function () {
        ddVal = $(this).val();
        }).blur(function () {
        if (ddVal == $(this).val()) {
            $(this).change();
        }
    }).change (function () {

});

For change event of dd1. But I don't know how to call java method from jQuery.

In my application I have a java class where there is a method which return list that I need to load in dd2 dropdown.

Can anyone help me regarding this issue?

• java
• javascript

• You definetely need to add some code... – M.Bennett Commented May 10, 2013 at 22:47

1 Answer 1

You should do such things with AJAX.

JavaScript sends the request, your controller utilizes the Java part to carry out what's needed and then passes back a JSON response, based on which your JavaScript manipulates the page.

For example, the script can issue the following request:

$.ajax({
    "type": "POST",
    "url": "/ajaxAPI/updatedropdown/",
    "data": {
        "selected": selectedMenuItemId
    },
    "success": function (data) {
        var menuItems = data.menuItems;
        dropDownToChange.updateChoices(menuItems);
    }
});

Your controller for such a request might look like:

public class DropDownListController implements Controller {

    @Override
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        MenuItem selected = extractSelectionFromRequest(request);
        List<MenuItem> choices = dropDownListService.getMenuFor(selected);
        ModelAndView mav = new ModelAndView("dropDownListAjax.jsp");
        mav.addObject("menu", choices);
    }

    // WARNING! Some error checks are missing!
    private MenuItem extractSelectionFromRequeset(HttpServletRequest request) {
        validateRequest(request);
        return dropDownListService.getMenuItemById(request.getAttribute("selected"));
    }

    // ...

}

And for the view you could have something like:

<%@ taglib uri="http://java.sun./jsp/jstl/core" prefix="c" %>
{
    "menuItems": [
        <c:forEach items="${menu}" var="menuItem">
            {
                "url": <c:out value="${menuItem['url']}"/>,
                "caption": <c:out value="${menuItem['caption']}"/>
            },
        </c:forEach>        
    ]
}

The client side JavaScript will then receive a response like:

{
    "menuItems": [
        {
            "url": "http://www.example./"
            "caption": "Home"
        },
        {
            "url": "http://www.example./news/list/"
            "caption": "News"
        },
        {
            "url": "http://www.example./forum/topics/"
            "caption": "Forum"
        },
    ]
}

Please note that the above example might not be 100% correct as there have been a while since I last used JSP (and I'm more fortable with FreeMarker anyways).

Basically, you invoke part of your web infrastructure that, rather than responding with HTML code, passes back JavaScript Objects based on the results of the requested operation.

Since jQuery is in the client side and JSP is on the server side, you don't have the option of directly calling the remote method. The standard way to do this in the world of the Web is AJAX.