Author: Matt

Preventing backspace from navigating your web page

I was running into problems where a user would have clicked outside of an input box and then type a backspace key and have the webpage navigate back one page. I tried a couple of solutions of my own, but they weren’t working.

I found this Stackoverflow solution which fixed the problem.


// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === 'INPUT' &&
(
d.type.toUpperCase() === 'TEXT' ||
d.type.toUpperCase() === 'PASSWORD' ||
d.type.toUpperCase() === 'FILE' ||
d.type.toUpperCase() === 'EMAIL' ||
d.type.toUpperCase() === 'SEARCH' ||
d.type.toUpperCase() === 'DATE' )
) ||
d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
}
else {
doPrevent = true;
}
}

if (doPrevent) {
event.preventDefault();
}
});

Knockout Auto-complete

I have been using knockout.js extensively in a recent project. I have enjoyed using it. The two-way data-binding has really simplified syncing the display and data, as well as posting data back to the server. I have found the documentation to be superb. Anything that I didn’t find in the documentation, I was able to learn with a quick google and usually found the result I needed on stackoverflow.com.

One feature that wasn’t explained well in the documentation was linking knockout to jQueryUI’s Auto-complete. I found several other blog posts from other people that had implemented it, but I think this post provided the best implementation. There were a couple of items that I tweaked to make it work closer to the way I wanted.

The first change was in the knockout custom binding. On the input text box, I had also defined a change event binding. The event binding was not getting called. There is a function named updateElementValueWithLabel in the definition that is called whenever an item was selected, changed or focused. I added this code to the bottom of the function:

if(typeof allBindings.event.change !== "undefined") {
allBindings.event.change();
}

This code enabled the change event binding to be called. It did create another problem. The above function was also being called when on option was moused over which triggered a focus event in the autocomplete plugin. I didn’t need the change event fired on just receiving focus, so this led to the second change I made.

In the jQueryUI section of the code, I changed the focus option to run just one line of code instead of calling the updateElementValueWithLabel function. That code was:
$(element).val(ui.item.label);
That line placed the option value in the html text box. When someone tabbed out or hit the enter key, the select/change functions would then be called.

I appreciate all the work the original author put in to develop this code. It saved me a tremendous amount of time in figuring out how to implement this and I only needed to make some minor tweaks to get it to work the way I needed it. Thanks Cameron.

PHP JSON POST data quirk

I encountered a strange PHP post data quirk. I was posting data to a PHP script using a jQuery AJAX call. I was posting all the data as a JSON string. When the PHP script was invoked the $_POST variable was totally empty. I also check $_REQUEST and $_GET and there was no data. I checked the headers and could see the data being passed, but it was not showing up in the standard PHP pre-defined variables. I did some googling and finally came up with this command:

$incoming = json_decode(file_get_contents("php://input"));

That ended up as an object with all of the data passed.

Knockout.js

I have recently started using knockoutjs.com. I have been looking at other frameworks for a while, but I finally settled on using knockout. I like the clean code you can use. I never liked having to start your objects/classes by extending a framework base class. There is some KO specific code that you have to include, but it doesn’t take over your code.

I like Durandal as well, but it is in the process of being phased out. The creator of that framework is now on the Angular 2.0 team and will be integrating features of Durandal into Angular. It is unclear when Angular 2.0 will be released and I didn’t want to start using a framework knowing an eventual migration was in the works.

Stay tuned for more Knockout related posts.

Changes

I thought I would be more regular with updates when I relaunched the website, but there have been quite a few changes recently. I am no longer working at MicahTek. It was a good experience, but it was time for a change. I am now working as a Programming Consultant at Pick Programmer’s Shop. Most of the projects will be MultiValue database related, but there is also some web development work. The nicest part of the new job is I am now working from home. The commute is much better now.

New Laptop

The Toshiba laptop I had for over 8 years finally died. I replaced it with Gigabyte P27K-CF2 17.3-Inch Laptop. This is advertised as a gaming laptop, but it makes a great laptop for developers as well. It has lots of memory for running multiple virtual machines at the same time and has lots of expansion as well. The screen is a HD screen and movies look great on it. Another nice thing is the laptop didn’t come loaded with bloatware, so I didn’t have to waste time uninstalling a lot of stuff.

JavaScript framework

I have been reviewing JavaScript frameworks. I have not been satisfied with the popular frameworks. I recently started looking at Durandal. It is based on Require.js so it is easy to create modules to organize your code. From what I have read, you do not have to start from a base durandal object. You just work with POJO (plain old javascript objects). That way you can also use your modules in non-durandal code as well. This is definitely a framework I am going to spend more time investigating.

Neat JavaScript trick

I have been reading Secrets of the JavaScript Ninja and learned an new idea. John Resig showed how to cache DOM elements by creating a cache inside of a function. He refers to this as a self-memoizing function and there is an example on page 75. Here is his example:

function getElements(name) {
  if (!getElements.cache) getElements.cache = {};
  return getElements.cache[name] = getElements.cache[name] || 
         document.getElementsByTagName(name);
}

I can  already think of where I can use this to improve performance on a website.