I’m using Struts2+Spring MVC+Hibernate and I’m trying to create a dependent drop-down menu. However, my JQuery function is only being called on the page startup, and not when an option is selected in the first menu. The organization drop-down menu is working fine. Here is the relevant code:
Search.jsp
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function loadFacilities(value){
$("#facilitySelect").get(0).options.length = 0;
$("#facilitySelect").get(0).options[0] = new Option("Loading facilities", "-1");
$.ajax({
type: "POST",
url: "DependentFacility",
data: "{organizationID:" + value+ "}",
dataType: "json",
success: function(msg){
$("#facilitySelect").get(0).options.length = 0;
$("#facilitySelect").get(0).options[0] = new Option("Select facility", "-1");
$.each(msg.d, function(index, item){
$("#facilitySelect").get(0).options[$("#facilitySelect").get(0).options.length] = new Options (item.Display, item.Value);
});
},
error: function(){
$("#facilitySelect").get(0).options.length = 0;
alert("Failed to load facilities");
}
});
});
</script>
</head>
<div class="element">
<p class="title"><s:property value="getText('global.a_search_screen')" /></p>
<s:form name="ASearch" action="aSearchList" type="POST">
<p class="content">
<table class="topSearch">
//Some Table stuff was here
<td >
<s:url id="organizationList" action="getListOfOrganizations" />
<sx:autocompleter href="%{organizationList}" name="organizations" onchange="loadFacilities(this.value)" keyValue="0" value="---- SELECT ONE-----"/>
</td>
<td >
<select id="facilitySelect" name="selectedFacility" ></select>
</td>
Struts.xml
<action name="DependentFacility" class="facilityActions">
<result type="json">
<param name="root">facility</param>
</result>
</action>
FacilityActions.java
public class FacilityActions implements ModelDriven<FacilityVO> {
FacilityService facilityService;
private Map<String, String> facilities = new HashMap<String, String>();
FacilityVO facility = new FacilityVO();
public void setFacilityService(FacilityService facilityService) {
this.facilityService = facilityService;
}
public FacilityVO getModel(){
return facility;
}
public String execute() {
return Action.SUCCESS;
}
public String addFacility(){
try{
facilityService.addFacility(facility);
return "SUCCESS";}
catch(Exception e){
return "ERROR";
}catch(Throwable t){
return "ERROR";
}
}
public Map<String, String> getFacilities() {
List<FacilityVO> facilityList = facilityService.listFacilities();
Iterator<FacilityVO> iterator = facilityList.iterator();
while (iterator.hasNext()) {
FacilityVO fac = iterator.next();
facilities.put(fac.getFacilityName(), Integer.toString(fac.getFacilityId()));
}
return facilities;
}
public FacilityVO getFacility(Object thing){
System.out.println("got a thing:" + thing.toString());
return facility;
}
public FacilityVO getFacility(){
System.out.println("Getting facility but nothing given?");
return facility;
}
}
As the Ajax and JavaScript recipes show the appropriate attribute to set is
loadOnTextChange.Remember, these are Dojo widgets, not simple HTML controls–you can’t necessarily use standard HTML attributes to modify their behavior.
If you’re using JSON, see the recipe for JSON results; it can be much simpler than you’re making it.