Saturday, 17 August 2013

Drop down dependecies with Servlet and AJAX

Drop down dependecies with Servlet and AJAX

I have a 3 drop down list. The 1st drop down is the parent and I want to
populate the the 2nd drop down when user select a value from 1st, then
populate the 3rd drop down based on 2nd. I'm using servlet to declare the
values. Here's the code:
Servlet:
protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
TblBIRFormNoDAO birdao = DAOFactory.getDaoManager(TblBIRFormNo.class);
List<TblBIRFormNo> birtypelist = birdao.getAllBirFormNumber();
request.setAttribute("birtypelist", birtypelist);
String bir = request.getParameter("bfnsCode");
TblTaxTypeDAO taxdao = DAOFactory.getDaoManager(TblTaxType.class);
if(bir != null){
List<TblTaxType> taxtypelist = taxdao.findAlltaxtCode(bir);
String json = null;
json = new Gson().toJson(taxtypelist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
String tax = request.getParameter("taxtCode");
TblTaxTypeDAO tdao = DAOFactory.getDaoManager(TblTaxType.class);
if(tax != null){
List<TblTaxType> taxdesclist = tdao.findAlltaxtDesc (tax);
String json = null;
json = new Gson().toJson(taxdesclist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
request.getRequestDispatcher("/servlet-test.jsp").forward(request,
response);
}
From this servlet. I'm getting the value of 1st drop down but it seems I
can't get the value of the selected value that will use to populate the
2nd and 3rd.
jsp + AJAX:
<script type="text/javascript">
$(document).ready(function() {
$('#bfnsCode').change(function() {
$.get('Test', function(responseJson) {
var $select = $('#bfnsCode');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
</script>
<label style="font-size: 17px;">BIR-Form Number</label><br>
<select name="bfnsCode" id="bfnsCode" class="sel"
style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="bircode" items="${birtypelist}">
<option
value="${bircode.bfnsCode}">${bircode.bfnsCode}</option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Tax Type</label><br>
<select name="taxtCode" id="taxtCode" class="sel"
style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxtype" items="${taxtypelist}">
<option value=""></option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Account Code</label><br>
<select name="taxtDesc" id="taxtDesc" class="sel"
style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxdesc" items="${taxdesclist}">
<option
value="${taxdesc.taxtDesc}">${taxdesc.taxtDesc}</option>
</c:forEach>
</select>
This part, the only value that is showing is the 1st drop down. What are
the missing codes for AJAX? or the servlet?

No comments:

Post a Comment