Can't display two dropdown box in Spring Mvc and question about ModelAndView

i'm working on a JSP that should have two dropdown box, where the second dropdown box is depending from the first one.

Running the app, the first drowpdown box is populated with some elements.
A client side jquery ajax method is called when the listbox onChange method is fired, providing to the controller an id value to use in the controller

My question is as follow:

How to populate and display the second dropdown box? All my attemps seems to fails. I retrieve all the values for the Activity and Document List, but i can display the first dropdown box only. The second dropdown box is never showed.
How can i solve this?
About the model:

The model itself just includes some properties along with their own getters and setters

	private String action;
private String activityId;
private Integer documentId;

The controller have a simple dispatcher as follow:

@RequestMapping(value = "/act", method = { RequestMethod.POST,
RequestMethod.GET })
public String dispatcher(
@Validated @ModelAttribute("activityForm") ActivityModel activityModel,
BindingResult errors, HttpServletRequest request, HttpServletResponse response)
throws Exception {
String methodName = activityModel == null ? null : activityModel.getAction();
Map <String, String> map = null;
if ("documentFilter".equals(methodName)) {
return documentFilter(activityModel, map, errors, request, response);
}
}

Due to the above code, this method is called and the first dropdown box is shown and filled with some elements

@RequestMapping(value = "/act/index", method = {RequestMethod.GET })
public ModelAndView act(HttpServletRequest request) {
List<Activity> activities;
try {
activities = activitiesService.getActivities();
} catch (DataNotFoundException e) {
log.error("Failed to get the activities (Activity). Returning an empty list.", e);
activities = new ArrayList<Activity>(0);
}
request.setAttribute("act", activities);
request.setAttribute("activityForm", new ActivityModel());
return new ModelAndView("act");
}

When the first dropdown box is populated, the cliend side Javascript manage the onChange event, that, when fired, sends a post request as follow:

$.ajax({
url : baseUrl + "act/documentFilter",
type : 'POST',
data : JSON.stringify({
'activityId' : activity.value
}),
dataType : 'json',
contentType : 'application/json',

and the request hits the following mapped method:

	@RequestMapping(value = "/act/documentFilter", method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public String documentFilter(@ModelAttribute("activityForm")ActivityModel form, 
@RequestBody Map<String,String> map, BindingResult errors,
HttpServletRequest request, HttpServletResponse response) {
form.setActivityId(map.get("activityID"));
ActivityModel myForm = form;
Integer sessionIdQuest = (Integer) request.getSession()
.getAttribute("sessionIdQuest");
Activity activity = null;
Document document = null;
try {
if (myForm.getActivityId() == null) {
document = activitiesService.getDocument(sessionId);
myForm.setActivityId(document.getActivity().getId());
} else {
Integer activityCode = Integer.valueOf(myForm.getActivityId().substring(5));
String year = myForm.getActivityId().substring(0, 4);
activity = activitiesService.getActivity(activityCode, year);
document = activity.getDocument().get(0);
}
} catch (DataNotFoundException e) {
log.warn("Warning: ", e);
throw new ServiceException();
}
List<Activity> activities = null;
List<Document> documents = null;
try {
activities = activitiesService.getActivities();
Integer activityCode = Integer.valueOf(myForm.getActivityId().substring(5));
String year = myForm.getActivityId().substring(0, 4);
documents = activitiesService.getDocument(activityCode, year);
// here i have both activities and documents
request.setAttribute("activities", activities);
request.setAttribute("documents", documents);
} catch (DataNotFoundException e) {
log.error("Fatal Error: " , e);
throw new IllegalStateException();
}
/* what should i return exactly?
the page return always the first drowpdown box
*/
return "act";
}

this is the jsp page:

	<form:form action="${pathPrefix}act" enctype="multipart/form-data"
name="activityForm" method="post" modelAttribute="activityForm">
<form:hidden path="action" />
<div id="contentBox">
<div style="font-size: medium;">
<p>Welcome</p>
<p>${results}</p>
</div>
</div>
<label for="survey">Select an activity:</label>
<form:select path="activityId" itemValue="${actSel}" onchange="javascript:submitForm('documentFilter');" htmlEscape="false">
<c:if test="${documents==null}">
<option value="">
<%--               <spring:message code="activity.label.selectActivity" /> --%>
</option>
</c:if>
<form:options items="${activities}" itemValue="id" itemLabel="description" />
</form:select>
<%-- Document block --%>
<c:if test="${documents!=null}">         
<form:select path="documentId" onchange="javascript:submitForm('FilterData');"
htmlEscape="false">
<form:options items="${documents}" itemValue="id" itemLabel="label" />
</form:select>
</c:if>     
<br>
<br>

Now i retrieve all the values for the Activity and Document List, but i can display the first dropdown box only. The second dropdown box is never showed.
How can i solve this?

• Ajax called on change of first drop down list will give documents list as a result but problem here is Ajax call will not reload your page and hence returned list is not updated on page.
• One simple solution in your case will be put your complete code of JSP page under single div tag as
  div id="mainDiv"> page here </div

After that in you Ajax call use 'success' block as
success: function(result) { $("#mainDiv").html(result); }