Click here to Skip to main content
14,696,499 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello everyone,
My question is about cascading dropdown in jsp with 2 dropdowns, where the second dropdown is based on selected value of the first. I am new to ajax,json,jquery,js and i can't fix the problem. Any help will be highly appreciated

My servlet code:

List<MeasuringPointParam> measuringPointParams = measuringPointParamManager.list(0);
        request.setAttribute("measuringPointParams", measuringPointParams);
 
        if (measuringPointCode == 7){
            measuringPointParams.subList(measuringPointParamCode = 5011, measuringPointParamCode = 5108);
        } else if (measuringPointCode == 509) {
            measuringPointParams.subList(measuringPointParamCode = 5109, measuringPointParamCode = 5113);
        } else if (measuringPointCode == 506) {
            measuringPointParams.subList(measuringPointParamCode = 5127, measuringPointParamCode = 5139);
        } else if (measuringPointCode == 507) {
            measuringPointParams.subList(measuringPointParamCode = 5140, measuringPointParamCode = 5152);
        } else if (measuringPointCode == 508) {
            measuringPointParams.subList(measuringPointParamCode = 5153, measuringPointParamCode = 5165);
        }
 
        JSONArray paramJSON = new JSONArray(measuringPointParams);
 
        String json = new Gson().toJson(paramJSON);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
 
        getServletContext().getRequestDispatcher("/WEB-INF/pages/log-param-form.jsp").forward(request, response);
    }


My JSP code:

<script>
$(document).ready(function() {
 
$('#measuringPointCode').change(function(event) {
    var measuringPointCode = $("select#measuringPointCode").parse(json).val();
    $.get('LogParam', {  
        measuringPointCode : measuringPoint 
    }, function(jsonResponse) {
 
    var select = $('#measuringPointParamCode');  
    select.find('option').remove();
      $.each(jsonResponse, function(index, value) {
      $('<option>').val(value).text(value).appendTo(select);
      });
    });
    });
});
</script>


<div>
                        <label for="measuringPoint"><fmt:message key="measuringPoint"/>:</label>
                        <select class="ui-widget-content ui-corner-all" name="measuringPoint" id="measuringPoint" required>
                                <c:forEach items="${measuringPoints}" var="measuringPoint">
                                <option value="${measuringPoint.measuringPointCode}" ${measuringPoint.measuringPointCode == logParam.measuringPointParam.measuringPoint.measuringPointCode ? 'selected' : ''}>${measuringPoint.measuringPointName}</option>
                            </c:forEach>
                        </select>
                    </div>
 
              <div>
                        <label for="measuringPointParamCode"><fmt:message key="energyParam"/>:</label>
                        <select class="ui-widget-content ui-corner-all" name="measuringPointParamCode" id="measuringPointParamCode" required>
                            <c:forEach items="${measuringPointParams}" var="measuringPointParam">
                                <option value="${measuringPointParam.measuringPointParamCode}" ${measuringPointParam.measuringPointParamCode == logParam.measuringPointParam.measuringPointParamCode ? 'selected' : ''}> ${measuringPointParam.energyParam.energyParamName}</option>  
                            </c:forEach>
                        </select>
                    </div>


What I have tried:

The problem is that Gson can't handle circular references in the serialized data. I will be thankfull for any help or suggestions.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900