Question

I am trying to update a dropdown using knockout and data retrieved via an ajax call. The ajax call is triggered by clicking on a refresh link.
The dropdown is successfully populated when the page is first rendered. However, clicking refresh results in clearing the dropdown instead of repopulating with new data.

Html:

<select data-bind="options: pages, optionsText: 'Name', optionsCaption: 'Select a page...'"></select> 
<a id="refreshpage">Refresh</a>

Script:

var initialData = "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]";
var viewModel = {
    pages : ko.mapping.fromJS(initialData)
};

ko.applyBindings(viewModel);


$('#refreshpage').click(function() {
    $.ajax({
        url: "@Url.Action("GetPageList", "FbWizard")",
        type: "GET",
        dataType: "json",
        contentType: "application/json charset=utf-8",
        processData: false,
        success: function(data) {
            if (data.Success) {
                ko.mapping.updateFromJS(data.Data);
            } else {
                displayErrors(form, data.Errors);
            }
        }
    });
});

Data from ajax call:

{
  "Success": true,
  "Data": "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]"
}

What am I doing wrong?

Answer 1

The problem you have is that you are not telling the mapping plugin what to target. How is it suppose to know that the data you are passing is supposed to be mapped to the pages collection.

Here is a simplified version of your code that tells the mapping what target.

BTW The initialData and ajax result were the same so you wouldn’t have noticed a change if it had worked.

http://jsfiddle.net/madcapnmckay/gkLgZ/

var initialData = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}];

var json = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"}];

var viewModel = function() {
    var self = this;

    this.pages = ko.mapping.fromJS(initialData);

    this.refresh = function () {
         ko.mapping.fromJS(json, self.pages);
    };
};

ko.applyBindings(new viewModel());

I removed the jquery click binding. Is there any reason you need to use a jquery click bind instead of a Knockout binding? It’s not recommended to mix the two if possible, it dilutes the separation of concerns that KO is so good at enforcing.

Hope this helps.