How to Process Ajax Result (Struts2)

Question

I'm extremely new to Ajax but have managed the following code but cannot fathom how I process the results to be set into the ajax response then processed.

I have this which sends the correct value of a select dropdown to the Action method:

$('#selectRegionList').on('change', function() {
var request = $.ajax({
url: "/cars/annCreateEdit!updateLocs.jc",
type: "POST",
data: {id: this.value}
});

Which correctly comes to this method in the action and loads a list of Objects (some attribues of the objects are String name, String description, Long id)

public String updateLocs() throws SQLException {
String regionName = findParamStringValue("id");
if (annoEditParams.getRegionStr() == null) {
addActionError("error.region.id.null");
} else {
Region region = new Region();
region.setName(regionName);
criteria.setRegion(region);
annoEditParams.setRegion(jobsService.loadRegion(criteria));
locations = annoEditParams.getRegion().getLocations();
}

return "jsonResult";

} I have the jsonResult for the action mapped to:

<result name="jsonResult" type="json">
<param name="root">locations</param>
<param name="location">/WEB-INF/jsp/locs.jsp</param>
</result>

And finally the correct result is being called (I know because the existing list (if I load one using the regular submit button) is being cleared)

request.done(function(response) {
$('#selectLocationList option').remove();
//what do i do here ? :o(
});

• but I've no idea what I have to do next to

The part of the page I'd like to populate is a struts2 select tag as follows:

<s:select
key="label.select.location"
list="annoEditParams.region.locations"
name="annoEditParams.locationStr"
listKey="name"
listValue="description"
multiple="false"
size="1"
value="%{annoEditParams.locationStr}"
disabled="%{annoEditParams.region.locations.size == 0}"
id="selectLocationList"
cssClass="span2"
/>

1: access the correct parameter that contains the list that I've loaded 2: if I have to 'set' that list in some special object for access back on the jsp 3: maintain my sanity :-/

Assistance/guidance would be very much appreciated. Thank you!

Answer 1

You can dispense with saving your Ajax in a request variable and just define a success callback in the Ajax call directly, if you want:

$.ajax({
  url: "/cars/annCreateEdit!updateLocs.jc",
  type: "POST",
  data: {id: this.value},
  success : function(response)
  {
       $('#selectLocationList option').remove();
       $('#selectLocationList').html(response);
  }
});

If your response was an HTML snippet that is just a list of options <option value='x'>x</option><option value='y'>y</option> etc., you could just set it as the innerHTML of the specified select tag, as above. Since you've chosen to return JSON, now you have to parse the JSON from the variable response on the client-side first using something like what's found here (Updating a Drop down list with Jquery from JSON).