Repopulate cascading dropdownlist in edit mode - MVC

Question

Finally got my cascading dropdownlist working only to find it's not repopulating in edit mode. The first dropdownlist populates, and I've set the jquery to run on either the dropdown change, or the document ready. I've set an alert in the jquery, but it doesn't enter the function in the controller to pull down the corresponding list for the second dropdown. Anyone know where I might be going wrong?

Here is the code - basically what I'm doing is selecting an airline, and from there, choosing from a list of flights associated with that airline: View:

<div class="editor-field">
    @Html.DropDownListFor(x => x.FlightTime.AirlineID, Model.Airlines, "Select Airline")
    @Html.ValidationMessageFor(model => model.AirlineID)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.FlightID, "Flight")
</div>
<div class="editor-field">
    @Html.DropDownListFor(x => x.FlightTime.FlightID, Model.Flights, "Select Flight")
    <a href="#" class="flight">Add new</a>
    @Html.ValidationMessageFor(model => model.FlightTime.FlightID)
</div>
etc...

jQuery in View

$(document).ready(function () {
    var id = $('select#FlightTime_AirlineID').val();
    populate(id);

    $("#FlightTime_AirlineID").change(function () {
        var id = $('select#FlightTime_AirlineID').val();
        populate(id);
    });

    function populate(id) {
        alert('hello');
        //The line below is where it stops
        $.get('../FlightTime/GetFlightList/' + id, function (response) {
            var flights = $.parseJSON(response);
            var ddlSelectedFlight = $("#FlightTime_FlightID");

            // clear all previous options
            $("#FlightTime_FlightID > option").remove();

            // populate the products     
            for (i = 0; i < flights.length; i++) {
                ddlSelectedFlight.append($("<option />").val(flights[i].Value).text(flights[i].Text));
            }
            if (flights.length == 0) {
                ddlSelectedFlight.append($("<option />").val('').text('No flights added'));
            }
        });
    }
});

Controller function it should go into:

public string GetFlightList(string id)
{
    var flightList = this.GetFlights(Convert.ToInt32(id));
    var myData = flightList.Select(a => new SelectListItem()
    {
        Text = a.FlightNumber,
        Value = a.FlightID.ToString()
    });
    string text = new JavaScriptSerializer().Serialize(myData);
    return text;
}

ViewModel

public class FlightTimeViewModel
{
        private List<SelectListItem> _airlines = new List<SelectListItem>();
        private List<SelectListItem> _flights = new List<SelectListItem>();

        [DisplayName("Airline")] //Selected Value
        [Required(ErrorMessage = "Please select an airline")]
        public string AirlineID { get; set; }

        [DisplayName("Flight")] //Selected Value
        [Required(ErrorMessage = "Please select a flight")]
        public string FlightID { get; set; }

        public List<SelectListItem> Flights
        {
            get { return _flights; }
        }
        public List<SelectListItem> Airlines
    {
            get
            {
                foreach (Airline a in TimeTable.Repository.AirlineRepository.GetAirlineList())
                {
                    _airlines.Add(new SelectListItem() { Text = a.AirlineName.ToString(), Value = a.AirlineID.ToString() });
                }
                return _airlines;
            }
    }
        public FlightTime FlightTime { get; set; }
}

The function works fine in Create mode, but stops in the line of jQuery just after the alert when in edit mode. Been struggling with Viewmodels/dropdownlists, but thought I had it figured out until this.

Thanks

Answer 1

Could you please try :

$("#FlightTime_AirlineID").change(function () {
        var id = $('select#FlightTime_AirlineID').val();
        populate(id);
    }).change();