[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.

[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.

[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.

[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]

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>

[HopParticipant]

Dimitar, Peter,
I figured out how to do what I was attempting. I used setInterval to run a function periodically, and inside the function I used a global variable to snapshot the innerHTML of id calendarTitleHeaderView. If the value is different, I continue with the function that snapshots the first and last cell’s innerHTML. Doing some math on the current views month and year, I turned the values from the first and last cell into actual dates. Now that I have a range, I can iterate through the cells using an offset for the date, jquery my database, then appendchild a div with the information. It works beautifully and although I have the interval set at 100ms, there is no noticeable hit on my linux server at all.

It is not how I wanted to do it, since I wanted to use a single event to trigger this function, it works and now I can move on.

I wanted to post this so anyone else attempting would know that it is possible.

Gary

[HopParticipant]

Sounds good Dimitar. I appreciate the offer. Thank you! I don’t know if that will work, because I support the code with a database, that adds widgets to the DOM based on an ajax query for that page. I have a few ideas I want to try today. If I fail, I’ll strip it down, verify the anomaly still occurs, and post the code here.

[HopParticipant]

Hi Dimitar,

I completely replaced my viewChange event code with what you posted and it still repeats. I wonder sir if it is because I am using alert? There are other ways I can see output from my code, and I will explore that and see if that causes the problem.

UPDATE: It wasn’t the alert. I took it out of my code and now when I click on the arrow (moving the mouse away just in case) and the calendar just iterates through the months and years, counting down of course. About one update per second. I have to CONTROL+F5 to refresh the page to stop it. The same thing happens on the forward arrow. =(

UPDATE(2): I commented out my call to my function fillCalendar() and the repeating still occurs.

One funny thing I noticed. When it is repeating, counting down month by month, if I click the forward arrow, the calendar bounces back and forth between two adjacent months, and faster. Like 2 updates per second. Hope that helps.

Thank you so much for the effort writing the code to help me. I really appreciate it! Remember, it is important for me to understand what is happening too, so I can use that in other instances like this one and not have to bug you guys.

[HopParticipant]

Hi Peter,
It wasn’t my mouse continuously pressed down over the arrow that was causing the repeat. lol. I’m smarter than that sir. The reason I am using refresh is because I am using an alert in a function I call from the viewChange event, and the alert fires while the calendar is still in the state it was before I ‘single left-clicked and moved the mouse cursor away’ on the back arrow. After I click OK on the alert, the calendar updates to the month I expected. So I put the refresh in thinking it would update the calendar BEFORE my function was called, and it does as expected, and that is when the repeat anomaly occurred.

With refresh in there, I click the arrow, the calendar now changes BEFORE the alert, then the alert fires, I would click ok on the alert and the calendar would change again and another alert fires, and so on, and so on, and so on.

The reason I want to have the calendar updated before my function is called is because (I’m sure you have guessed by now) I want to address the cells via the DOM and javascript and add content supported by my database.

Thank you for your time sir. My comment at the top was poking fun by the way. I mean no disrespect at all. I have a ton of respect for you and Dimitar, and the software you created so rich in features. Thank you!!! =)

[HopParticipant]

Thank you Dimitar for the information and I’m excited that there is an easy fix for my repeat issue. Could you show that in an example? The code below is what I am currently using.

				$("#paygrid").on('viewChange', function (event) 
 				{
						var mydate= $("#paygrid").jqxCalendar('getDate');
						$("#paygrid").jqxCalendar('refresh');
						var view = event.args.view;
						var viewFrom = view.from;
						var viewTo = view.to;
						fillCalendar();
						//alert((viewFrom.getMonth()+1)+"."+viewFrom.getDate()+"-"+(viewTo.getMonth()+1)+"."+viewTo.getDate());
				});

[HopParticipant]

OK, I have more info to share.
When I click on a date that is in the previous or next month, the grid changes as expected to show that month and the viewChange event fires. I do a refresh in the viewChange event but the viewChange event doesn’t fire repeatedly. That only happens when I click the forward or back arrows.

Another thing I noticed. When I click on the title and the month grid/selector appears, I pick any month and then it shows, but the viewChange event does NOT fire. Maybe this will be fixed in future versions? Would be nice to have an event for the title being clicked as well. Also, events for completion of render and refresh.

[HopParticipant]

Ok Peter, thank you. That fixed it. But I still do not know why. The example doesn’t show your solution so I do not know what the elements in the array refer to. I just changed the first element to be “yyyy-MM-dd” and left the other three elements the same as you shown in your example.
$("#"+record.name).jqxCalendar({ titleFormat: ["yyyy-MM-dd", "yyyy", "yyyy", "yyyy"], showWeekNumbers: true, enableWeekend: true, navigationDelay:200, width: 500, height:500});
That gives me what I wanted though. My curiosity is all I need solved at this point.

Thank you for your time and reply!

[HopParticipant]

I’m surprised! The authors thought of just about everything else.

That’s ok, I’ll just have to write my own. Didn’t want the distraction but I need the practice anyway.

Thank you for the reply and the awesome software!!

[HopParticipant]

Hey Dimitar, I have an off topic question that came up trying to trouble shoot the issue you fixed for me. I placed alerts in my code so I could see variable data, or placed in code at intervals to see what worked and didn’t at whatever line, and none of the alerts fired at all.

The code you helped me with is in an included PHP file on my server. Is that the problem? Weird because the javascripting works ok, otherwise the menu widget wouldn’t work. So if the javascripting works, why not fire the alerts?

By alerts of course, as an example, I mean alert(“I made it to line 10”); in javascript.

I haven’t found a good IDE yet. I thought I had it with Eclipse, and a few other IDE options. None of them worked for me, and I am sure it is probably how I have them set up. With Eclipse, I got it to open/run my project in a tab on my Chrome browser, but the results were buggy compared to opening a tab to my server with the project I am writing. For example… same code, same structure… opened/executed in eclipse, I had my page rendered as expected with the CSS, but the calendar widget had garbage for the date, and nothing else worked. Same code, addressed from my LAMP server in the same browser worked just fine.

Finally, I did discover that my customized SciTE editor actually offers PHP intellisense! I never knew that! But I do not have that with javascripting…. yet.

Currently, I write my code, save it (in SciTE), and then refresh my tab in my browser to see the results. My clues are when a widget disappears, I know my code has an error. It is very med-evil and very VERY non-productive. Without feedback, it’s hard to know what has gone wrong.

What do you guys use? What do javascripting authors use? I love the language and jQWidgets and want to be productive with my code authoring. Debugging has always been good to me working with Visual Studio working with C, C++, C#, VB, VBS, VBA. My dearest dream is to be able to do that with PHP and JS.

Anything you offer as far as advice would be so greatly appreciated!
And again, thank you for helping me over a major stumbling block. I appreciate your time!

[HopParticipant]

It’s brilliant Dimitar, and beautifully written. I don’t know why I didn’t think of that. Rusty at my programming roots I’m afraid. I totally forgot about recursion to iterate through a tree structure.

This solution is perfect, and perfectly understandable, thank you. Oh, it also works!!! THANK YOU!!

[Author]

Posts