Click here to Skip to main content
12,621,302 members (32,063 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: Knockout.js
I have a text box with knockout binding as follows.
<input style="width: 385px; float: right" type="text" id="SymptomBox" placeholder="Symptoms" data-bind ="value : acceptedSymptom,valueUpdate:['afterkeydown'],event:{keypress:AddSymptoms}"/>

My view model is as follows
var ViewModel = function (data) {
var self=this;
self.acceptedSymptom=ko.observable();
}
ko.applyBindings(ViewModel);
I can update the observable array "acceptedSymptom" each time i press a key with key board.Clearly it is due to valueUpdate:['afterkeydown'] attribute binding to my input text box.This works fine,but i also want observable array to update value while i change value of input text box other than keydown.For example,i have a JQuery autocomplete plugin integrated to above mentioned text box.While i select any menu item from drop down by mouse click,observablearray should have changed value with change in value of input text box.It is noted that if i am selecting drop down values,using keyboard it works fine.Only issue is with selection with mouse pointer do not update observable array.Other than 'afterkeydown', i have also tried valueUpdate:['input','afterkeydown','change','blur','onLoad']. None of these make any sense.Please help me....
Posted 31-Jul-13 7:01am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Dear Jitendra,

Actually if you are using knockoutJS, this means that your design is centered around the model. Thus, if your autocomplete returns some value - most logically is to change value of the model, rather than it's presentation in input.

If you still insist on changing value of the input, just force triggering "change" event after the operation:

document.getElementById("changeit").addEventListener("click", function(){
    document.getElementById("SymptomBox").value = "new value";
    $("#SymptomBox").trigger("change");
});

Simple example:


http://jsfiddle.net/voronenko/QATTg/[^]
  Permalink  
Comments
Jitendra Kumar Sabat 1-Aug-13 1:32am
   
Thanks a load Vyacheslav.'trigger' event of jquery solved my problem. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.161128.1 | Last Updated 31 Jul 2013
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100