Getting uncaught error "NO_MODIFICATION_ALLOWED_ERR" for input binding

Question

I'll start with this:

<script src="/Scripts/jquery-1.6.2.min.js" ... <script src="/Scripts/knockout-1.2.1.debug.js" ... <script src="/Scripts/knockout.mapping-latest.js" ... <script src="/Scripts/jquery.unobtrusive-knockout.min.js" ... 

Then I pull out a flat JSON object from the object and bind each property found to the corresponding elements in the DOM:

 $.ajax({ url: '/GetRecord', type: 'POST', dataType: 'json', data: JSON.stringify(requestObject), contentType: 'application/json; charset=utf-8', success: function (data) { // Clear the current view model VM.Items.length = 0; // only one item coming from server VM.Items[0] = ko.mapping.fromJS(data.BlankItem); // for each property found, bind it to the matching DOM element $.each(VM.Items[0], function (indexInArray, valueOfElement) { var attrName = indexInArray; // skip over things not an accessor (get/set property function) if( typeof valueOfElement == "function") { var attrValue = valueOfElement(); // if it a checkbox, bind the checked attribute var a = $('input[name="' + attrName + '"][type="checkbox"]'); if (a.length) a.dataBind({ checked: attrName }); // if it a radio, bind all the found radio checked attributes var b = $('input[name^="' + attrName + '"][type="radio"]'); if (b.length) b.dataBind({ checked: attrName }); // if it a text, bind the text attribute var c = $('input[name="' + attrName + '"][type="text"]'); if (c.length) c.dataBind({ text: attrName }); // <--- Error (use value) } }); // Then set knockout loose ko.applyBindings( VM.Items[0] ); } }); 

This results in an error:

Unprepared error: NO_MODIFICATION_ALLOWED_ERR: DOM 7 exception
ko.bindingHandlers.updateknockout-1.2.1.debug.js: 1577
invokeBindingHandlerknockout-1.2.1.debug.js: 1231
ko.applyBindingsToNode.ko.dependentObservable.
disposeWhenNodeIsRemovedknockout-1.2.1.debug.js: 1268
evaluateknockout-1.2.1.debug.js: 927
ko.dependentObservableknockout-1.2.1.debug.js: 965
ko.applyBindingsToNodeknockout-1.2.1.debug.js: 1252
ko.applyBindingsknockout-1.2.1.debug.js: 1284
ko.utils.arrayForEachknockout-1.2.1.debug.js: 48
ko.applyBindingsknockout-1.2.1.debug.js: 1283
$ .ajax.successPropertyForm: 266
f.extend._Deferred.e.resolveWithjquery-1.6.2.min.js: 16
wjquery-1.6.2.min.js: 18
f.support.ajax.f.ajaxTransport.send.d

I do not see the binding of any elements that it should not. In addition, there are no declarative knockout bindings in html. What am I doing wrong?

Answer 1

OMG. The answer was to use the right binding attribute. Instead of text input was value !

Answer 2

In my case, the problem was that I was attaching data to text instead of value.

bad: <input type = "text" data-bind = "text: id" maxlength = "3" style = "width: 100%;" />

good: <input type = "text" data-bind = "value: id" maxlength = "3" style = "width: 100%;" />

Answer 3

I also saw this error in Chrome when I accidentally called ko.applyBindings(viewModel) several times.