Highlight popup based on another Spring MVC AJAX dropdown
I have two dropdowns, one for categories and one for subcategories. Depending on which category I select in the first dropdown, I want the second dropdown to be dynamically populated with subcategories of the selected category. This is what I have so far:
Controller to populate the first dropdown:
@RequestMapping(value = "/post_project", method = RequestMethod.GET)
public String postProjectPage(Model model) {
Project project = new Project();
List<Category> categoriesList = categoryService.getAllCategories();
model.addAttribute("projectForm", project);
model.addAttribute("categoriesList", categoriesList);
return "post_project";
}
JSP:
<form:form id="post_project" action="/post_project" method="post" modelAttribute="projectForm">
<form:select class="form-control" id="selectCategory" path="category">
<option value="">-Select-</option>
<form:options items="${categoriesList}" itemValue="id" itemLabel="category_name"/>
</form:select>
For subcategories, I have the following controller:
@RequestMapping(value = "/post_project", method = RequestMethod.POST)
public @ResponseBody List<Subcategory> getAllSubcategories(@RequestParam(value="categoryId") int categoryId) {
return categoryService.getAllSubcategories(categoryId);
}
JSP:
<form:select class="form-control" id="selectSubcat" path="subcategory">
<option value="-1" label="-Select-"/>
</form:select>
I used AJAX to populate the second dropdown, but I'm very new to this and I don't know if this is correct.
("#selectCategory").change(function(){
var categoryId = $(this).val();
$.ajax({
type: 'POST',
url: "/post_project",
data: {"categoryId" : categoryId},
success: function(data){
var slctSubcat=$('#selectSubcat'), option="";
slctSubcat.empty();
for(var i=0; i<data.length; i++){
option = option + "<option value='"+data[i].id + "'>"+data[i].subcateogory_name + "</option>";
}
slctSubcat.append(option);
},
error:function(){
alert("error");
}
});
});
Of course it won't work. When I select a category, nothing appears in the second dropdown. I don't know what to do next and I've tried everything. Can someone please tell me what I am doing wrong?
source to share
Make the request as GET:
("#selectCategory").change(function(){
var categoryId = $(this).val();
$.ajax({
type: 'GET',
url: "/categories/" + categoryId,
success: function(data){
var slctSubcat=$('#selectSubcat'), option="";
slctSubcat.empty();
for(var i=0; i<data.length; i++){
option = option + "<option value='"+data[i].id + "'>"+data[i].subcateogory_name + "</option>";
}
slctSubcat.append(option);
},
error:function(){
alert("error");
}
});
});
Server Controller Method:
@RequestParam
used to get query parameters. So it would be like..../post_project?categoryId=1
Instead, @RequestParam
use @PathVariable
like below:
So to get the subcategories you have @RequestMapping
like.../categories/1
@RequestMapping(value = "/categories/{categoryId}", method = RequestMethod.GET)
public @ResponseBody List<Subcategory> getAllSubcategories(@PathVariable("categoryId") int categoryId) {
return categoryService.getAllSubcategories(categoryId);
}
source to share
Try adding contentType and dataType to your Ajax call:
` ....
$.ajax({
type: 'POST',
url: "/post_project",
data: {"categoryId" : categoryId},
contentType:"application/json; charset=utf-8"
dataType:"json",
........`
and change your controller to "Post Json Request":
@RequestMapping(value = "/post_project", method = RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE)
source to share