NumberInput hasfocus has no effect

[HopParticipant]

Using knockout, I can create an input in an input element using a databind, and use an observable for hasfocus. When I set that observable to true, the input gains the focus. This also works with the combobox and possibly others that I haven’t tried yet. EDIT: It doesn’t work with the MaskedInput either.

But when I try this with an InputBox, it does not gain the focus. I tried it in a function that is called on a keyup event and a function called from a click event from a button. Neither of those work. I can press tab to manually set the focus, and then focus is passed to the next input when I press enter, but when I cycle around again, I stick on the input before it because focus is never gained by the InputBox. This is very frustrating!

Is there a special way I have to manually and programmatically set the focus of an InputBox or is it impossible?
Here is the code. Please excuse all the console.logs. I was trying to see if maybe my element ID code was failing on the preceding input element.

<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: mySelectedIndex,
			source: ba_data,
			displayMember: 'caption',
			valueMember: 'value',
			width: 200, 
			height: 20},
			mySelectedItem: mySelectedIndex,
			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 
	<div 
		id="in3" 
		contenteditable="true" 
		style="padding-left:3px; position:absolute; top:20px; left:10px; color:black" 
		data-bind="jqxNumberInput: {
			groupSeparator: '',
			inputMode: 'simple',
			promptChar: ' ',
			symbol: '$',
			digits: 5,
			width: 200,
			height: 20,
			value: billAmount},
			hasSelectedFocus: isSelected3,
			hasFocus: isSelected3,
			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: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 id="out1" 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: mySelectedIndex"></strong></div>
<div id="out2" style="font-family:Verdana,Georgia,Serif; text-shadow: 2px 2px 2px #000000; padding-left:3px; position:absolute; top:255px; left:5px; color:lightblue">Account abbr: <strong data-bind="text: av"></strong></div>
<button style="position:absolute; top:325px; left:5px" data-bind="click: ftest">Click me</button>
<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.billAmount=ko.observable(0);
			this.field4=ko.observable("Some More Data");
			this.field5=ko.observable("Even More Data");
			
			// Observable for the selectedIndex of jqxComboBox
			this.mySelectedIndex=ko.observable(-1);
			this.accountValue=ko.observable(false);
			// Leftovers from the knockout tutorial. Saved for 'how-to' 
			// with computed functions.
			this.av = ko.computed(function() {
				return this.accountValue();    
			}, this);	
			
			this.ftest=function(){
				this.isSelected2(true);
			}
			// 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??
				
				// Get the ID attribute value of the current element that called this
				var myinput=event.currentTarget.attributes['id'].nodeValue;
				console.log(myinput+" "+event.keyCode);
				// Simple element crawler setup. ENTER pressed in a focused element
				// moves to the next desired element.
				if (event.keyCode == 13){
					switch(myinput){
						case 'in1' :
							console.log(event);
							this.isSelected2(true);
							break;
						case 'in2' :
							console.log("Got here, didn't work");
							this.isSelected3(true);
							break;
						case 'in3' :
							console.log(event);
							this.isSelected4(true);
							break;
						case 'in4' :
							console.log(event);
							this.isSelected5(true);
							break;
						case 'in5' :
							console.log(event);
							this.isSelected1(true);
							break;
						default:
							console.log(event);
							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);

		}

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

		// 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! :)
		var myview = ko.applyBindings(new AppViewModel());
		// Initialize the home made calendar (mysql date format,html container element)
		initCalendar('2014-01-01','paygridcalendar'); 

	});
</script>

[Peter StoevKeymaster]

Hi Hop,

Each widget has a ‘focus’ method for putting the focus in the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HopParticipant]

I tried it with a standard jqxinput and it didn’t work for me. I replaced how I set focus to it in my code above with $(“#in4”).jqxInput(‘focus’); and the border of it seems to change, but I typed a character and nothing appeared. I even tried the fiddle in the API example and it didn’t work for me either. I clicked the button then typed a character that seemed to go nowhere.

So that is why I did the focusing like I did above. I tried using the focus method and it didn’t work, for me. And my method above works, but only with jqxInput and not the other inputs. Maybe it has something to do with the other input types have to be created in a DIV element and jqxInput is created in an input element. As it is in the api examples.

[HopParticipant]

Hi Hop,

Each widget has a ‘focus’ method for putting the focus in the widget.

Best Regards,
Peter Stoev

I don’t see a focus method listed in the API for the DateTimeInput. I used my code but added the focus method on a standard input, and it worked. I want to see if it will also help my code on the other controls I failed with before. That’s when I noticed it missing (focus method) in the API for DateTimeInput.

[Peter StoevKeymaster]

Hi Hop,

As I wrote, each widget has a ‘focus’ method. If it has HTML Input inside it calls the Input’s Focus method so it is the same as creating an Input and calling its focus. Unfortunately, I don’t know why that did not work for you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HopParticipant]

Tried it from three different platforms, one of them was a linux rig, and had the same result. The problems I run into with jqWidgets is that I do not have the source to modify, and to get that I have to buy the license. I might just do that because your software is just that good! Problem is, I’m not using them for commercial use. Just my home budget and other stuff home-related. I like your widgets though and thinking about using them for my web apps I do for my embedded systems work, so the license might be the way to go.

But right now, all I am trying to do is have a nice data-entry focus flow. Key in data in an input and press enter, where focus moves to the next control. Rinse repeat, except the next control may be specialized. I needed the focus to move to the next, highlighting ALL the contents, so if I type something, it replaces the contents. Or I could just arrow right and get to the end of what was in that control. Works if I use just plain old standard controls with knockout, but with jqWidgets, I am having issues I do not see consideration for in the API or other docs. Figured it was for a reason, to keep people from busting out of your code with need for the source, which is $$$. And I get that, totally.

Hope I clarified. I really like your software and it has really helped me do some nice in-home things.

EDIT: That issue I had with the calendar widget pushed me to write my own. Although it doesn’t sport fancy fades and such, it works beautifully for what I needed. I was pushed to do it because I needed a calendar that considered my database for what should be shown in each cell, like scheduled bills and events.

[Peter StoevKeymaster]

Hi Hop,

We really have “focus” method for each widget and I confirm that we missed to add it to the DateTimeInput’s API Documentation. We will fix that for the upcoming release. When the “focus” method is called, we call the focus() method of the appropriate inner elemenet. For example, when you use jqxDateTimeInput which is created from a DIV tag and you call its “focus” method, we will call the “focus” method of the jqxDateTimeInput’s HTML Input tag. We will continue improving our documentation and widgets, but sometimes we also miss some things. Having nice people who use our product and give us feedback, helps us much to make our software something really useful. Btw, it looks like you created a really nice Scheduler. Such widget is in our plans for this year, too. It will have some nice features like loading appointments/events from various Databases, repeating appointments, reminders, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HopParticipant]

That’s great to hear Peter, thank you! And I am sure you guru’s will figure it out when you performance test your new stuff. But in case it helps, when I did my own scheduler, I initially wrote it where the database was queried via ajax as each cell was created. It worked fine, but there was a noticeable delay when I moved months. That is understandable when 42 cells have to be created and a query is run on each one.

So I took a few steps back and ran a query on what the expected date range would be, before creating my calendar. I built each day’s bundle of hits into objects inside the php variable that is JSON encoded, as in…

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array

$startdate = $_GET['startdate']; 
$enddate = $_GET['enddate']; 
$query = "SELECT id,account,label,reference_number,amount,due_date,pay_date,funds_source,balance FROM bills where pay_date between '".$startdate."' and '".$enddate."' order by pay_date asc";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	
	if(is_null($row['label'])){
		$query = "SELECT label FROM budget_accounts where name = '".$row['account']."'";
		$result2 = mysql_query($query) or die("SQL Error 1: " . mysql_error());
		$row2 = mysql_fetch_array($result2, MYSQL_ASSOC);
		$row['label']=$row2['label'];
		$query = "UPDATE bills set label='".$mylabel."' where id=".$row['id'];
		$updatebills=mysql_query($query) or die("SQL Error 1: " . mysql_error());
	}
	
	$listings[$row['pay_date']][]=array(
       'id' => $row['id'],
       'account' => $row['account'],
       'label' => $row['label'],
       'reference_number' => $row['reference_number'],
       'amount' => $row['amount'],
       'due_date' => $row['due_date'],
       'pay_date' => $row['pay_date'],
       'funds_source' => $row['funds_source'],
       'balance' => $row['balance'],
      );
}
if(!empty($listings)){
	echo json_encode($listings);
}
?>

I then unwrapped each object that was found inside an object named for the date of the cell that was being rendered, as in…

	var bills=fetchBatch(startdate,enddate);
	var billsObj= JSON.parse(bills);
	var responseText=billsObj.responseText;
	if(responseText!=""){
		//alert(responseText);
		var jdata=JSON.parse(responseText);
	}

and referenced it with…

			if(jdata){
				if(mysqlDate in jdata) {
					billcount=jdata[mysqlDate].length;
				}
			}else{
				billcount=0;
			}

and if there were bills in that mysqlDate,

					var billText=document.createTextNode(jdata[mysqlDate][z].label.toUpperCase());

The result was MUCH MUCH faster! Month transitions were instant, with the cells filled with data I needed from my database.

For what it’s worth.

[Author]

Posts