Dynamic drop down loaded with ajax is found as null in spring mvc controller

Question

I've dynamically loaded a dropdown with ajax call but the problem is I can't access it in controller. the dynamically loaded dropdown is found as null in controller!

JSP Code:

<body>
    <c:url var="updateUrl" value="${actionPath}"/>
    <form:form method="post" action="${updateUrl}" commandName="complaintDetail">
        <table>
            <tr>
                <td><form:label path="complaintCategory">Category</form:label></td>
                <td>                        
                    <form:select path="complaintCategory">
                        <form:option value="NONE" label="--- Select ---" />
                        <form:options items="${categoryList}"/>
                    </form:select>
                </td> 
            </tr>
            <tr>
                <td><form:label path="complaintReasonDetail">Reason</form:label></td>
                <td>                        
                    <form:select path="complaintReasonDetail">
                        <form:option value="NONE" label="--- Select ---" />
                        <form:options items="${reasonList}" />
                    </form:select>
                </td> 
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="${submitString}">
                </td>
            </tr>
        </table>  
    </form:form>
</body>

The JS Code:

$('#complaintCategory').change(
function(){
    var findReasonsURL = '/Vela-web-client/complaint/getReason/' + $(this).val() + '/GENERAL.htm';
    //alert($(this).val());
    $.getJSON(findReasonsURL, {},
    function(data) {
        var html = '<option value="">--- Select ---</option>';
        var len = data.length;
        $.each(data, function(i, obj){
            html += '<option value="' + obj.idNr + '">' + obj.complaintReasonSt + '</option>';
        });

        $('#complaintReasonDetail').html(html);

    });
});

For this ajax call, the corresponding controller code:

@RequestMapping(value = "/complaint/getReason/{category}/{rType}", method = RequestMethod.GET)
public @ResponseBody 
List<ComplaintReasonDetail> getReason(
        @PathVariable(value = "category") String category,
        @PathVariable(value = "rType") String rType)
{
    List<ComplaintReasonDetail> complaintReasonDetails;

    ComplaintCategory complaintCategory = ComplaintCategory.valueOf(category);
    ReasonType reasonType = ReasonType.valueOf(rType);
    try
    {
        complaintReasonDetails = ComplaintReasonHandler.getComplaintReasonAdvanceSearchResult("", false, complaintCategory, true, reasonType, true, BigInteger.ONE);
        System.out.println("reason list count = " + complaintReasonDetails.size());
        return complaintReasonDetails;
    }
}

Up to this, everything works fine!

The problem occurs when I submit the form. I get complaintReasonDetail as null in controller code.

Controller Code:

@RequestMapping(value = "/complaint/doadd/addnew", method = RequestMethod.POST)
public String addCompliant(@RequestBody @ModelAttribute("complaintDetail") ComplaintDetail complaintDetail, BindingResult result, Model model)
{
    System.out.println("category = "+complaintDetail.getComplaintCategory()); // OK
    System.out.println("reason = "+complaintDetail.getComplaintReasonDetail());  // print null ???
}

It's a bit long question, but to make it clear, i think it is necessary.

So, what am I missing actually?

check browser view source what html generated for complaintReasonDetail select box? and also the first option value is empty not set in jquery. — Abhishek Nayak, Sep 17 '14 at 11:15
@Rembo: yes, it is generated and i can see it in `form-data` section when the form is submitted and the value is passed (e.g. 2). But i think, this value is not mapped to `complaintReasonDetail` or how to convert it to this object. — sarwar026, Sep 17 '14 at 11:19
is the `complaintReasonDetail` primitive/wrapper type? or user-defined, if it is user-defined then you need a converter. look at this [answer](http://stackoverflow.com/a/921725/1066779) and [docs](http://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/validation.html) — Abhishek Nayak, Sep 17 '14 at 11:36
Yes, it is user-defined and a custom class. Is there no way to avoid converter, since I already fetch it from database when dynamically load the dropdown? Thanks for the link. — sarwar026, Sep 17 '14 at 11:41
there is, you can create one more extra variable to hold the selected value and change the path of select box to same. then you can retrieve `complaintReasonDetail` by using it. — Abhishek Nayak, Sep 17 '14 at 11:47
@Rembo: Thanks for your help. But I will appreciate a little more to change the path so that I can retrieve complaintReasonDetail. You can also put all these as an answer so that I can accept it. Thanks — sarwar026, Sep 17 '14 at 12:01

score 0 · Answer 1 · answered Apr 21 '17 at 10:23

You can call ajax from select with onchange event like code below:

function onChangeAjaxMain()
        {
            var name = $('#state').val();

            $.ajax({
                type: "POST",
                url : 'mainAjax',
                data: ({
                    nameOfCategory: name
                }),
                success : function(data) {
                    $('#city').html(data);

                }
            });
        }

in jsp use form:spring format:

<form:select name="state" id="state" onclick="onChangeAjaxMain()" path="state">
    <form:option value="1">blah</form:option>
    <form:option value="2">blah</form:option>
</form:select>
    <br>
    <form:select id="city" path="city">
        <form:option value="NONE">City</form:option>
    </form:select>

finally in Controller:

@RequestMapping(value = "/mainAjax", method = RequestMethod.POST)
    public @ResponseBody
   String mainAjax(@RequestParam("state") String state){

        String cities= "<option value=\"\">City</option>";
        ArrayList<City> citySet = /*fill list respect to state*/

        for(City city : citySet){

            cities+= "<option value=\""+city.getName+"\">"+city.getName+"</option>";
        }
        cities+= "</option>";
        return cities;

In maven add: jackson-core and jackson-databind. I use 2.6.3 version and also add jackson-mapper-asl with 1.5.3 version

I hope it'll be helpful for you!

Dynamic drop down loaded with ajax is found as null in spring mvc controller

1 Answers1

Linked