1

I have 2 dropdowns. Onchange of first dropdown I am getting second dropdown value.Both are dynamic dropdowns.

Onchange of first dropdown i am getting result in firebug html page with view..But i am not getting same result in main html .how to append same result to my main html.

This is my code:

<form:form method="get" commandName="frmSample" action="retrieve" modelAttribute="customer">

<form:select path="CustomerId" id="customerDetails">
    <option selected="selected" disabled="disabled">Select Customer</option>
     <form:options items="${map.customerList}"
     itemLabel="customerName" itemValue="customerId" />
</form:select> <br>

This is first dropdown values.

onchange of first dropdown I am creating ajax call:

    <script>
    $(document).ready(function() {
        $("#customerDetails").change(function() {
            var value1 = $('#customerDetails :selected').text();
            $.ajax({
                type : 'POST',
                url : 'environments',
                data : {
                    selectedcustomername : value1
                },
                success : function(result) {
                    getEnvNames(result);
               }
            });
        });
    });
</script>

function getEnvNames(result){
    $('#environmentName').empty().append('<option selected="selected" disabled="disabled">Select An Environment</option>');
    var data = JSON.parse(result);
    $.each(data, function(key, value)
    {
        $("#environmentName").append("<option>" + value.environmentName +" - "+ value.environments_purpose + "</option>");

    });

}

This is my UI

<b>Environment:</b>
<form:select path="EnvrironmentId" id="environmentName">                                                                                                                                                    
    <option selected="selected" disabled="disabled">Select An Environment</option>
    <form:options items="${map.environmentnamesList}" itemLabel="environmentName" itemValue="envrironmentId"/>                                                                                                                                                      
</form:select>
</td>

This is my back-end:

@RequestMapping(value="/environments",method = RequestMethod.POST)
    public ModelAndView getenvironments(HttpServletRequest request,
        HttpServletResponse response,@ModelAttribute("customer") Customer customer,@RequestParam String selectedcustomername) throws Exception{
            System.out.println("selected cust name"+selectedcustomername);
            ModelAndView model = null;  
            Map<String, Object> map = new HashMap<String, Object>();
            List<org.mvc.domain.Customer> customerList = loginDelegate.getCustomerList();
            List<org.mvc.domain.Environments> environmentnamesList = loginDelegate.getEnvironments(selectedcustomername);
            Collections.sort(environmentnamesList, new CustomComparator());
            for(int i=0;i<environmentnamesList.size()-1;i++){
                customer.setEnvrironmentId(environmentnamesList.get(0));
                customer.setEnvironmentName(environmentnamesList.get(1));
            }
            map.put("environmentnamesList", environmentnamesList);
            model = new ModelAndView("welcome", "map", map);
            return model;
        }

I am getting result in firebug html section.how to load that result into main html.

lara123
  • 41
  • 8
  • You need to do something with the result of your ajax request. Look at this q/a: [ajax success function](https://stackoverflow.com/questions/22892706/ajax-success-function) for an example. – TZHX Jan 11 '16 at 08:45

0 Answers0