How may I access items in a combobox using knockout?

[HopParticipant]

I tried a number of things but I can’t figure out how to access the items in a jqxComboBox using the selectedIndex. I created an observable selectedIndex and it works and updates just fine. That’s where I am stuck. I need get the value of the selected item into an observable so I can write that to my database.

Here is the code. There is a lot more behind all this, like the calendar, and this code is in an included file, so all the html setup is elsewhere.

<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:5px; left:5px; color:lightblue">Account 
	<div id="in1" contenteditable="true" style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" data-bind="jqxComboBox: {placeHolder: 'ACCOUNT', animationType: 'fade', autoDropDownHeight: true, selectedIndex: selectedIndex, source: ba_data,displayMember: 'caption', valueMember: 'value', width: 200, height: 20}, hasSelectedFocus: isSelected1,hasFocus: isSelected1, valueUpdate = 'afterkeydown', event: { 'keyup': searchKeyboardCmd}"></div></div>
<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:55px; left:5px; color:lightblue">Bill Reference 
	<input id="in2" style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" data-bind="jqxInput: {width: 200, height: 20, value: billReference}, hasSelectedFocus: isSelected2,hasFocus: isSelected2, valueUpdate = 'afterkeydown', event: { 'keyup': searchKeyboardCmd}" /></div>
<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:105px; left:5px; color:lightblue">Bill Amount 
	<input id="in3" style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" data-bind="jqxInput: {width: 200, height: 20, value: field3}, hasSelectedFocus: isSelected3,hasFocus: isSelected3, valueUpdate = 'afterkeydown', event: { 'keyup': searchKeyboardCmd}" /></div>
<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:155px; left:5px; color:lightblue">Due Date 
	<input id="in4" style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" data-bind="jqxInput: {width: 200, height: 20, value: field4}, hasSelectedFocus: isSelected4,hasFocus: isSelected4, valueUpdate = 'afterkeydown', event: { 'keyup': searchKeyboardCmd}" /></div>
<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:205px; left:5px; color:lightblue">Pay Date 
	<input id="in5" style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" data-bind="jqxInput: {width: 200, height: 20, value: field5}, hasSelectedFocus: isSelected5,hasFocus: isSelected5, valueUpdate = 'afterkeydown', event: { 'keyup': searchKeyboardCmd}" /></div>
<div style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:285px; left:5px; color:lightblue">Account Selected: <strong data-bind="text: selectedIndex"></strong></div>

<script type="text/javascript">
	$(document).ready(function () {

		// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
		function AppViewModel() {
			
			// Setup element observables and their defaults (for now)
			this.billReference = ko.observable("12345");
			this.field3=ko.observable("Some Data");
			this.field4=ko.observable("Some More Data");
			this.field5=ko.observable("Even More Data");
			
			// Observable for the selectedIndex of jqxComboBox
			this.selectedIndex=ko.observable(-1);

			// doesn't work :(
			this.myitem=ko.observable($("#in1").jqxComboBox('getSelectedItem'));
		
			// Setup element focus observables, setting the first element to start with
			// when the page is done loading.
			this.isSelected1 = ko.observable(true);
			this.isSelected2 = ko.observable(false);
			this.isSelected3 = ko.observable(false);
			this.isSelected4 = ko.observable(false);
			this.isSelected5 = ko.observable(false);
			
			// Called by an element on a keyup event. ENTER (13) is tested, and if so,
			// the next desired element is focused via setting the observable to true.
			this.searchKeyboardCmd = function (data, event) {
				
				// VERY useful console log entry! Made the var line below possible. Where have I been??
				console.log(data);
				console.log(event);
				
				// Get the ID attribute value of the current element that called this
				var myinput=event.currentTarget.attributes['id'].nodeValue;
				
				// Simple element crawler setup. ENTER pressed in a focused element
				// moves to the next desired element.
				if (event.keyCode == 13){
					switch(myinput){
						case 'in1' :
							this.isSelected2(true);
							break;
						case 'in2' :
							this.isSelected3(true);
							break;
						case 'in3' :
							this.isSelected4(true);
							break;
						case 'in4' :
							this.isSelected5(true);
							break;
						case 'in5' :
							this.isSelected1(true);
							break;
						default:
							this.isSelected1(true);
							break;
					}
				}
				event.preventDefault(); // didn't fix console warning :(
				//return true;
			};

			// Setup the DIV for the Calendar Label. This is modified in hop.js
			// as the month changes by clicking a date outside the current month.
			var labelobj = document.createElement('div');
			labelobj.setAttribute('id', "lbl_paygrid");
			labelobj.setAttribute('style',"font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:5px; left:258px; color:lightblue");
			var mytext=document.createTextNode("Scheduled Payments");
			document.getElementById('mycontent').appendChild(labelobj); 

			// Setup the DIV for the calendar created by hop.js
			var widgetobj = document.createElement('div');
			widgetobj.setAttribute('id', "paygridcalendar");
			widgetobj.setAttribute('style',"position:absolute; top:25px; left:260px; color:black");
			document.getElementById('mycontent').appendChild(widgetobj);
						
			// Get json encoded billing accounts via ajax 
			var budget_accounts =
			{
					datatype: "json",
					async: false,
					datafields: [
							{ name: 'caption' },
							{ name: 'value' }
					],
					url: '<?php echo $site_root.$php_scripts; ?>budget_accounts_fetch.php',
					cache: false
			};
			var budget_accounts_da = new $.jqx.dataAdapter(budget_accounts);
			budget_accounts_da.dataBind();
			this.ba_data=ko.observableArray(budget_accounts_da.records);

			// Initialize the home made calendar (mysql date format,html container element)
			initCalendar('2014-01-01','paygridcalendar'); 
		}

		// This selects all the text contents of an editable element as it receives focus.
		// I do not know how this works yet. I found this in a knockout coding forum.
		ko.bindingHandlers.hasSelectedFocus = {
			init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				ko.bindingHandlers['hasfocus'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
			},        
			update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				ko.bindingHandlers['hasfocus'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);        
				var selected = ko.utils.unwrapObservable(valueAccessor());
				if (selected) element.select();
			}
		};
		
		// Make it so! :)
		ko.applyBindings(new AppViewModel());

	});
</script>

Any help would be greatly appreciated. Thank you!

[HopParticipant]

I figured it out. By creating a custom binding and most importantly, testing for null, I was able to use the getSelectedItem method of the combobox to get my value.

		ko.bindingHandlers.mySelectedItem = {
			init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
			},        
			update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				
				var selected = ko.utils.unwrapObservable(valueAccessor());
				var item = $(element).jqxComboBox('getSelectedItem');
				if (item){
					console.log(item.value);
				}
			}
		};

And using it in my page…

	<div 
		id="in1" 
		contenteditable="true" 
		style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" 
		data-bind="jqxComboBox: {
			placeHolder: 'ACCOUNT',
			animationType: 'fade',
			autoDropDownHeight: true,
			selectedIndex: selectedIndex,
			source: ba_data,
			displayMember: 'caption',
			valueMember: 'value',
			width: 200, 
			height: 20},
			mySelectedItem: selectedIndex,
			hasSelectedFocus: isSelected1,
			hasFocus: isSelected1, 
			valueUpdate = 'afterkeydown', 
			event: { 'keyup': searchKeyboardCmd}
			"></div></div>

[Author]

Posts