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

问题

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?

回答1:

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!

来源：https://stackoverflow.com/questions/25888668/dynamic-drop-down-loaded-with-ajax-is-found-as-null-in-spring-mvc-controller

标签

ajax

Spring

spring-mvc

dropdownbox