0

I'm having an issue with a dropdown list using Knockout. I'm fairly new to this. The scenario is that when I edit some data, I call a Web Api to return some information in JSON. The JSON is then mapped and displayed for an end user to edit if they wish to. I have two dropdown lists (manufacturers and ranges). The manufacturer dropdown list gets populated and set to the correct value which is returned. The issue is that the second dropdown list gets populated but does not get set to the correct value. Instead it remains at the default "select" value. Would someone be able to explain why this happens or point me in the right direction?

My code is as follows. I have trimmed it down but can provide any further code if need be. Many thanks.

JS

/// <reference path="../knockout/knockout-3.4.0.debug.js" />
/// <reference path="../jquery/jquery.min.js" />

var deal = function () {
var self = this;
// These are the initial options
self.ManufacturerOptions = ko.observableArray();
self.VehicleManufacturerId = ko.observable();
self.RangeOptions = ko.observableArray();
self.VehicleRangeId = ko.observable();

var Deals = {
    ManufacturerOptions: self.ManufacturerOptions,
    VehicleManufacturerId: self.VehicleManufacturerId,
    RangeOptions: self.RangeOptions,
    VehicleRangeId: self.VehicleRangeId,
};

self.Deal = ko.observable();
self.Deals = ko.observableArray();
RetrieveDeals();
GetManufacturers();

self.EditData = function (Deal) {
    GetManufacturers();
    GetRanges(Deal.VehicleManufacturerId);
    self.Deal(Deal);
};

function GetManufacturers() {
    $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetManufacturers',
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.ManufacturerOptions(dataReturned);
        }
    });
}

function GetRanges(manufacturerId) {
    $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetRanges?manufacturerCode=' + manufacturerId,
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.RangeOptions(dataReturned);
        }
    });
}
};

$(document).ready(function () {
    ko.applyBindings(new deal());
});

ASCX Control

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Home.ascx.cs" Inherits="Desktop.Controls.DealBook.Home" %>

<h1>DealBook</h1>
<div data-bind="if: Deal">
<div>
    <h2>Update Deal</h2>
</div>
<div>
    <p>Manufacturer: <select id="Manufacturer" data-bind="options: ManufacturerOptions, optionsCaption: 'Select Manufacturer', optionsValue: 'cman_code', optionsText: 'cman_name', value: Deal().VehicleManufacturerId, event: { change: manufacturerChanged}"></select></p>
    <p>Range: <select id="Range" data-bind="options: RangeOptions, optionsCaption: 'Select Range', optionsValue: 'cran_code', optionsText: 'cran_name', value: Deal().VehicleRangeId, event: { change: rangeChanged }"></select></p>
</div>
<input type="button" id="btnUpdateData" class="btn btn-primary" value="Update Deal" data-bind="click: UpdateData" />
<input type="button" id="btnCancel" class="btn btn-primary" value="Cancel" data-bind="click: Cancel" />

UPDATE I believe the issue is that my code is trying to update the dropdown list to the selected value before the options are returned from the Web API. Any thoughts on how I can bind the value to the deal once the options are returned?

Rickesh J
  • 135
  • 6
  • See the `valueAllowUnset` parameter to options. http://knockoutjs.com/documentation/options-binding.html#parameters – Roy J Feb 12 '16 at 14:21
  • Thanks for the comment. I just fixed it now by adding 'async: false,' to my calls to the Web Api. This stopped the `Deal` being set before the dropdown list was populated. – Rickesh J Feb 12 '16 at 14:57

1 Answers1

0

Fixed by using Jquery promises to defer method calls until complete.

I now call $.when(GetRanges(Deal.VehicleManufacturerId)).then(function () { self.Deal(Deal) }); instead of 

GetRanges(Deal.VehicleManufacturerId);
self.Deal(Deal);
Rickesh J
  • 135
  • 6
  • `async: false` is generally a bad idea. See http://stackoverflow.com/questions/24187160/ajax-async-false-is-deprecated – Roy J Feb 12 '16 at 15:12
  • Thanks @RoyJ. I fixed it by using Jquery promises and deferred my calls. I've updated my answer to reflect this – Rickesh J Feb 15 '16 at 08:22