We Keep Coding

Learning knockoutjs - value not adding to array

I've recently started to learn knockoutjs ( i think its brilliant. ) However messing around with it and learning how to add to an array i've gotten stuck and need a little help. Fiddle can be found here
Here is my html code:
<h3>We need more animals</h3>
<form data-bind="submit: addAnimal">
<input type="text" data-bind="value: animalToAdd, valueUpdate: 'afterkeydown'"/>
<button type="submit">Add animal</button>
</form>
<select data-bind="options: animalArray, optionsText: 'name'"></select>
<p data-bind="text: selectedAnimal"></p>
And here is my knockoutjs code:
function viewModel(){
var self = this;
self.animalArray = ko.observableArray([
{
name: 'elephant'
},
{
name: 'dog'
},
{
name: 'cat'
}
]);
self.animalToAdd = ko.observable();
self.addAnimal = function(){
if(self.animalToAdd() != ''){
self.animalArray.push(self.animalToAdd());
self.animalToAdd('');
}
alert(self.animalToAdd());
}
}
ko.applyBindings(viewModel);
For some reason i can't get the new animal to push into the current array of animals - I aren't 100% what im doing wrong, as it puts the value in, but not the text.
Any help would be great :)

First mistake, you are missing definition for selectedAnimal but since you are using it in text binding, your code is breaking
Second mistake, animal has a structure { name: 'elephant' } but you are pushing like self.animalArray.push(self.animalToAdd()), so even if you push, you will not see anything in select.
Updated JSFiddle
Pointers
Knockout added new binding for value: animalToAdd, valueUpdate: 'afterkeydown' called textInput. This was introduced in KO 3.2 so if you are using above that version, use it.

Is it possible to prefill a form using ng-model in angularjs?

I have a simple form
<form>
Name:
<input type="text" ng-model="edit"><br />
</form>
and a simple array in the controller
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
I am repeating the array in the view
<div ng-repeat="x in statuses">{{x.text}}<button ng-model="edit">edit</button></div>
so i was wondering when i click the edit button can the data be populated inside the form input field using ng-model ?
plunker

You can do that by using a ng-click in yout button instead of a ng-model.
Your button will have to run a function on click, just like this :
<button ng-click="editFunction(x)">edit</button>
And then in your controller, there is the function :
$scope.editFunction = function(x){
$scope.edit = x.text;
}
In this function you will get the value of x and set this value in your form ng-model.
There is a working Plunker

Disable multi-select in jquery autoSuggest

I am getting data from server and loading them to JQuery auto suggest. It's works fine. But I don't know how to configure it. I Initialize my text box to it. Now i need when user select one value from it, He will be not able to choose another value of he cant enter a word, except he can delete old value.
Here is my code :-
$(document).ready(function(e){
//handle auto suggestion when compose message
var user_ids = {};
//var hidden_user_ids = $('input:hidden[name=user_ids]');
var url = '/account/insiderName';
var conf = {
selectedItemProp: 'name',
searchObjProps: 'name',
asHtmlID: 'insider_ids',
neverSubmit: true,
multiSelect: false,
preFill: ',' //, {{attributes: {name: 'joe', value: '12345'}, num: '1'}},
};
$('.insiderUser').autoSuggest(url, conf);
});
Here is my text Box Code:-
<div class="field to"><input type="text" name="toInsider" value="" class="insiderUser"/></div>

Add this configuration option also:
selectionLimit: 1
since it defaults to false, which means no limit.
From the docs: https://github.com/wuyuntao/jquery-autosuggest

AutoComplete text box with text value and id

I want auto complete text box with text and id .I used the following code for auto complete in my application
<script type="text/javascript">
var $auto=$.noConflict();
$auto(document).ready(function(){
var data3 = ['niju','vivek','anil','Anil'];
$auto("#employee").autocomplete(data3);
});
</script>
<input type="text" name="employee" id="employee" value="" class="inp-form">
In this code we faced one drawback .There can be duplicate entry is possible since the same values as been repeated .
How to get id value instead of text label ?
Any suggestions are highly appreciated.
Demo Here

You can try with a source define like : [ { label: "Choice1", value: "value1" }, ... ].
See documentation here : autocomplete#option-source
In your case it would be something like :
var data3 = [{label: 'niju', value: 1},{label : 'vivek', value : 2}, ...];
$auto("#employee").autocomplete({source: data3});

jquery templates selection

I have a jquery template with N radio buttons and I need to select radio button with value that I pass after loading template from external html file(using jQuery.tmpl() method). Is there a good way of selection of radio button in template without multiple {{if}}, {{else}} statements, duplicate code and selectors?

In what format is your data coming back from the server? If it's a JSON array, could you do something like this?
html:
<script id="myTemplate" type="text/html">
<input type="radio" value="${value}"{{if selected}} checked{{/if}}>${name}</input><br />
</script>
<div id="myDiv">
</div>
javascript:
var myData = [
{name: 'test 1', value : 'radio1', selected : false},
{name: 'test 2', value : 'radio2', selected : false},
{name: 'test 3', value : 'radio3', selected : true},
{name: 'test 4', value : 'radio4', selected : false}
];
$('#myTemplate').tmpl(myData).appendTo('#myDiv');
http://jsfiddle.net/JbTwB/1/

If you have the value of the desired radio, you could do something like:
jInstance.find('input[value=' + desiredValue + ']').attr('checked', true);
This assumes that jInstance is the newly-created copy of the template, and that desiredValue exactly matches the value of the radio button you'd like to be pre-selected.
If you only know part of the value, there are other jQuery selectors you can use to target that input.
If you're looking for a more general "form pre-filling" routine, you'll need to establish some kind of format for storing the set of pre-fill values, and a mapping from that format to the template. But it can be done, and it's not necessarily that hard, either.