So on a change of one drop down list I'm trying to populate a second list.
I have this client side function:
$('#ProjectReference').change(function() {
var url = "@Url.Action("GetProjectIterations", "Rally")";
var data = { selectedProject: $('#ProjectReference').val() };
$.getJSON(url, data, function(iterations) {
alert("hello?");
var items;
$.each(iterations, function(i, iteration) {
items += "<option value='" + iteration.Name + "'>" + iteration.Name + "</option>";
});
}
);
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: data,
contentType: 'application/json; charset=utf-8',
success: function (iterations) {
alert("hello?");
var items;
$.each(iterations, function(i, iteration) {
items += "<option value='" + iteration.Name + "'>" + iteration.Name + "</option>";
});
$("#ProjectIteration").html(items);},
failure: function () { alert("nope");}
});
});
I've tried 2 different formats for calling my controller (so I know I don't need both - I've just included both to highlight what I've tried).
My controller gets called, I am returning data but none of my alerts get fired (and nothing happens to the drop down list I am trying to update). So maybe the way I'm returning my data isn't correct? My select list has a count of 33 so it appears to have data before its returned.
public ActionResult GetProjectIterations(string selectedProject)
{
var projectIterations = cache.Get("ProjectIterations") as Hashtable;
var iterations = (projectIterations[selectedProject] as ArrayList).Cast<DynamicJsonObject>().ToList();
var selectList = iterations.Select(
iteration => new SelectListItem {Text = iteration["Name"], Value = iteration["Name"]});
return Json(selectList);
}