Databases
StackOverflow2013
Postsdbo
POGetting an uncaught error "NO_MODIFICATION_ALLOWED_ERR" for input binding
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting an uncaught error "NO_MODIFICATION_ALLOWED_ERR" for input binding
    text
    copied!<p>I start with this:</p> <pre class="lang-html prettyprint-override"><code>&lt;script src="/Scripts/jquery-1.6.2.min.js" ... &lt;script src="/Scripts/knockout-1.2.1.debug.js" ... &lt;script src="/Scripts/knockout.mapping-latest.js" ... &lt;script src="/Scripts/jquery.unobtrusive-knockout.min.js" ... </code></pre> <p>Then I pull a flat JSON object from the server and bind each property found to matching elements in the DOM:</p> <pre><code>$.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's a checkbox, bind the checked attribute var a = $('input[name="' + attrName + '"][type="checkbox"]'); if (a.length) a.dataBind({ checked: attrName }); // if it's 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's a text, bind the text attribute var c = $('input[name="' + attrName + '"][type="text"]'); if (c.length) c.dataBind({ text: attrName }); // &lt;--- Error (use value) } }); // Then set knockout loose ko.applyBindings( VM.Items[0] ); } }); </code></pre> <p>It results in an error:</p> <blockquote> <p>Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7<br> ko.bindingHandlers.updateknockout-1.2.1.debug.js:1577<br> invokeBindingHandlerknockout-1.2.1.debug.js:1231<br> ko.applyBindingsToNode.ko.dependentObservable.<br> disposeWhenNodeIsRemovedknockout-1.2.1.debug.js:1268<br> evaluateknockout-1.2.1.debug.js:927<br> ko.dependentObservableknockout-1.2.1.debug.js:965<br> ko.applyBindingsToNodeknockout-1.2.1.debug.js:1252<br> ko.applyBindingsknockout-1.2.1.debug.js:1284<br> ko.utils.arrayForEachknockout-1.2.1.debug.js:48<br> ko.applyBindingsknockout-1.2.1.debug.js:1283<br> $.ajax.successPropertyForm:266<br> f.extend._Deferred.e.resolveWithjquery-1.6.2.min.js:16<br> wjquery-1.6.2.min.js:18<br> f.support.ajax.f.ajaxTransport.send.d </p> </blockquote> <p>I don't see it binding any items that it shouldn't. Also, there are no declarative knockout bindings in the html. What am I doing wrong?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload