Develop Reference

Knockout "with" binding, cascading dropdown, reload selected values not working

I have a knockout example, using "With" binding to create a cascading drop-down.
The Drop-down works fine, if i select the values, 4 drop-downs cascading with each corresponding select options.
However I would like to save the drop-down setup, so at a page load, i could get back the saved values, just like presetting the values.
Logging out the values the observables get by calling 'save', after selecting from drop-down. But doesn't work when calling 'loadPresetData', to simulate the data mapping into the observable selected values.
I have forked the fiddle below.
http://jsfiddle.net/turrytheman/3urLenmd/
var sampleModel=[{"products":[{"name":"1948 Porsche 356-A Roadster","year":[{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}]},{"name":"1948 Porsche Type 356 Roadster","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]},{"name":"1949 Jaguar XK 120","year":[{"name":2019,"months":[{"name":"oct"},{"name":"jun"},{"name":"jul"}]},{"name":2013,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]}],"name":"Classic Cars"},{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}];
var Cascading = function() {
var self = this;
self.category = ko.observable();
self.product = ko.observable();
self.years = ko.observable();
self.month = ko.observable();
// Whenever the category changes, reset the product selection
self.category.subscribe(function(val) {
self.product(undefined);
});
self.product.subscribe(function(val) {
self.years(undefined);
});
self.years.subscribe(function(val) {
self.month(undefined);
});
// Operations
self.loadPresetData = function() { //simulating a load, recieved from AJAX, setting saved values
self.category(JSON.parse('{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}'));
self.product(JSON.parse('{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]}'));
self.years(JSON.parse('{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}'));
self.month(JSON.parse('{"name":"april"}'));
}
self.save = function() {
var data = {"category": ko.toJSON(ko.toJS(self.category)),
"product": ko.toJSON(ko.toJS(self.product)),
"years": ko.toJSON(ko.toJS(self.years)) ,
"month": ko.toJSON(ko.toJS(self.month))
}
console.log(data);
};
};
ko.applyBindings(new Cascading());
HTML:
<div class='liveExample'>
<div>
<select data-bind='options: sampleModel, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
</div>
<div data-bind="with: category">
<select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
</div>
<div data-bind="with: product">
<select data-bind='options: year, optionsText: "name", optionsCaption: "Select...", value: $parent.years'> </select>
</div>
<div data-bind="with: years">
<select data-bind='options: months, optionsText: "name", optionsCaption: "Select...", value: $parent.month'> </select>
</div>
<button data-bind='click: loadPresetData'>Load</button>
<button data-bind='click: save'>Save</button>
<div style="color: red"data-bind="text:'Category :' + ko.toJSON(category)"></div>
<div style="color: green"data-bind="text:'Product :' + ko.toJSON(product)"></div>
<div style="color: blue"data-bind="text:'Year :' + ko.toJSON(years)"></div>
<div style="color: black"data-bind="text:'Months :' + ko.toJSON(month)"></div>
</div>

Short answer: The dropdowns are not getting set because the object you are setting to self.category() and other dropdowns in loadPresetData don't exist in sampleModel (or sampleProductCategories in the fiddle).
Yes, there is an object that looks like and has the same properties and nested arrays as the object JSON.parse() creates, but they are totally different objects. They would fail a Strict Equality Comparison or "=== comparison". You can prove this hypothesis by setting the category and other cascading values from the sampleProductCategories array itself.
self.loadPresetData = function() {
self.category(sampleProductCategories[1]);
self.product(sampleProductCategories[1].products[0]);
self.years(sampleProductCategories[1].products[0].year[0]);
self.month(sampleProductCategories[1].products[0].year[0].months[0]);
};
Now, when category is updated, knockout goes and looks for this object in sampleProductCategories. It exists and hence category won't be set to undefined.
Here's an updated fiddle

Set "title" of selected value from dropdown after selection using knockout

I am using knockout js with ASP.NET MVC. I want to show the selected value's text on title when user hover on the selected value after selecting on the dropdown. So if bigger value hidden goes can show in title.
like: if I have three values One, Two , BiggerValuethathidden.
So now obviously if my dropdown size is not that much bigger like third value, my third value will go hidden after size defined for dropdownlist.So I want to show when set value as title on hover.
Now I have try to implement the dropdownlist bind like this:
<select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
To Set after so many searches , I am trying to do it like this:
<div title="" id=dvAccount">
<select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>
click event function based on Solution:
setTip = function(c, event){
var element = event.currentTarget;
var qref = element.getAttribute('Qref');
var click_id = element.id;
return true;
}
Where am I going wrong?
Please some one help me to do this tricky trick!

You can use "attr" binding ("attr: { title: AccountId }" - you can put another (human-readable) value instead of AccountId):
<div data-bind="attr: { title: AccountId }" id=dvAccount">
<select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>

Uffffff it is accidently or I don't know but from last 3 questions I asked question and me myself post my answer, this time again.
I found an extreme helpful solution for title of dropdown selected value:
Just use this jquery and css combination:
$('select').each(function(){
var tooltip = $(this).tooltip({
selector: 'data-toggle="tooltip"',
trigger: 'manual'
});
var selection = $(this).find('option:selected').text();
tooltip.attr('title', selection)
$('select').change(function() {
var selection = $(this).find('option:selected').text();
tooltip.attr('title', selection)
});
});
Thanks to TSV for such faster response and help me but this one is better as per my application.

Knockout: multiple select with objects not working

I'm using Knockout 3.2 and i'm trying to display a multiple select dropdown with some selected values, but the values are not being selected. The problem is that KO does not populate the 'value' attribute of the options:
<select data-bind="options: availableCountries, selectedOptions: chosenCountries, optionsText: 'name'" size="5" multiple="true">
<option value="">France</option>
<option value="">Germany</option>
<option value="">Spain</option>
</select>
VM:
var viewModel = {
availableCountries : ko.observableArray([{name:'France'}, {name:'Germany'}, {name:'Spain'}]),
chosenCountries : ko.observableArray(['Germany'])
};
If instead of object i turn availableCountries into a simple strings array, it works.
You can see a live sample here

var viewModel = {
availableCountries : ko.observableArray([{name:'France'}, {name:'Germany'}, {name:'Spain'}]),
chosenCountries : ko.observableArray(['Germany'])
};
['Germany'] is not {name: 'Germany'}!
And also if you, would write chosenCountries : ko.observableArray([{name: 'Germany'}]), this would lead to two different objects, with the same property name and the value 'Germany'.
var viewModel = (function() {
var self = {};
self.availableCountries = ko.observableArray([{name:'France'}, {name:'Germany'}, {name:'Spain'}]);
self.chosenCountries = ko.observableArray([self.availableCountries()[1]]);
return self;
})();
ko.applyBindings(viewModel);
I changed the viewModel, to an instand called function which returns the viewModel.
(function () {...})()<-call
http://jsbin.com/monasijufaya/1/edit?html,js,output

dropdown knockoutjs with value from server

I am working on a drop down menu within a TR .. I have true, false or none as the value that I receive from server and I want that to change the drop down option as in example below.
The first one is working but I want the second one to function as the first one
Example is here: http://jsfiddle.net/3xLgJ/
This is my HTML:
<div data-bind='text: incomingValue'></div>
<select data-bind="value: incomingValue">
<option value="true">Yes</option>
<option value="false">No</option>
<option value="none">Don't Know</option>
</select>
How can I implment this as above as this is within a tr and to function as above
<select data-bind='options: yesno, value: incomingValue'/>
Here is my knockout
var myModelView = function () {
self = this;
self.yesno = ko.observableArray(['Yes', 'No', 'Don\'t know']);
self.incomingValue = ko.observable('none');
};
var moView = new myModelView();
ko.applyBindings(moView);
Thanks
Thanks

The best solution is probably to slightly reconstruct the view model to use objects instead of simple strings:
// Create a "class" that represents an option
var Option = function(id, caption) {
this.id = id;
this.caption = caption;
};
Now you populate the observable array with objects constructed from this function:
self.yesno = ko.observableArray([
new Option('true', 'Yes'),
new Option('false', 'No'),
new Option('none', 'Don\'t know')
]);
You can use the "optionsText" binding to correctly bind these objects to the markup:
<select data-bind="options: yesno,
optionsText: 'caption',
value: selectedItem"></select>
If you receive a string "none" from the server, you need to find the object representing this option:
var incomingValue = 'none';
// Find the first object that is a match in the observable array "yesno"
var incomingItem = ko.utils.arrayFirst(self.yesno(), function(item) {
return item.id == incomingValue;
});
self.selectedItem = ko.observable(incomingItem);
When displaying the selection somewhere else you'll need to consider that the selection is represented by an object:
<div data-bind='text: selectedItem().caption'></div>
Demo: http://jsfiddle.net/3xLgJ/2/

You need to use the optionsText and optionsValue bindings. You'll need to make an observable array of values and text:
self.yesno = ko.observableArray([
{value:"true",text:"Yes"},
{value:"false",text:"No"},
{value:"none",text:"Don't Know"}]);
then, you need to do something like this in your html:
<select data-bind="options: yesno2, optionsText: 'text',optionsValue: 'value', value: incomingValue"></select>
See here for a working example

knockout.js - setting an empty selection

I'm trying to use knockout.js to populate and manage a <select/> box. I'd like the initial value to be empty.
However, I'm having trouble trying to force the managed value to be null at any time, let alone initially.
For example, consider this fiddle:
HTML:
<select data-bind="options: myOptions, value: myValue"></select> aka
<span data-bind="text: myValue"></span>
<div>
<button data-bind="click: setMyValue(null)">clear the selection</button>
<button data-bind="click: setMyValue('one')">select "one"</button>
<button data-bind="click: setMyValue('four')">select "four"</button>
</div>
<ul data-bind="foreach: log">
<li>message: <span data-bind="text: message"></span></li>
</ul>
JS:
function Model() {
var self = this;
self.myOptions = ['one', 'two', 'three', 'four'];
self.myValue = ko.observable();
self.setMyValue = function (val) {
return function(){
this.log.push({
message: "ok, trying to set value as " + val
});
self.myValue(val);
};
};
self.log = ko.observableArray([]);
}
var model = new Model();
ko.applyBindings(model);
The select "one" and select "four" buttons work to change the selection by forcing an update of myValue(). However, the clear the selection button doesn't work. The selection is not cleared by myValue(null), which is what I thought was the proper way to do it.
What am I doing wrong?

You need the optionsCaption binding set.
<select data-bind="options: myOptions, value: myValue, optionsCaption: 'select...'"></select>
Updated Fiddle