Triggering True onChange Event for Text Fields

Something I’ve run into on multiple occasions is the desire to be able to trap the change event of text fields and textareas – not just on blur but when their value actually changes. I will assume some basic understanding of how DOM elements behave and that, while the input and textarea nodes have change events, they don’t actually fire in all browsers until you move away from them. This led me to thinking that there has to be a somewhat optimal way to trigger an event on those fields only when their value changes. If you’ve ever tried something like this before, you may have settled for a combination of listening to keypress and keyup events to get your desired behavior across all browsers, but once again, you have to attach this to all. elements on which you wish it to behave. jQuery once again allows us to develop a very simplistic solution in a relatively tiny bit of code:
Continue reading →

Introducing JSWidgets

I have been, for some time, working on a concept that would allow the average JavaScript user to create robust, interactive applications with ease. A daunting task, I know, but having tried to implement so many bloated libraries for simplistic interaction, I wanted to create a way for the beginning or average web developer to create advanced modules quickly. One of the biggest things I have noticed in recent years is the lack of attention given by many to the client side code structure. With this project, I hope to help educate developers a bit more in the necessity of code separation, documentation and reuse of code.

I have been asked if I’m guilty of reinventing the wheel, and it is possible that you may think so, but I feel this offers a level of uniqueness not found in a library this lightweight. In fact, the purpose of this library is not to be a solution to the need in and of itself, but rather it is intended to lay the groundwork for developers to quickly extend their own widgets and have them working in no time. While I am introducing this library in its infancy, I am already in the process of overhauling the template structure to leverage Underscore.js, the most lightweight and robust JavaScript template engine I’ve found to date.
Continue reading →

jQuery Slideshow Plugin Update

I have finally found a few spare minutes to refactor the Google Code Project I started for my jQuery plugin last year. While I still am far from where I want to be with it, I have managed to set the plugin into a fully OOP codebase and add in events and the capability for custom handlers on those events. My hope is that people will now be able to find a bit more usability to the slideshow, since it is fully customizable. Feel free to swing by my Google Code page and let me know thoughts or ideas on ways to improve the slideshow as it evolves.

JavaScript Library Nightly Builds, SymLinks and Auto-Updates

Something has been bothering me for some time, and I finally took the time to resolve the issue once and for all – relatively speaking. As mentioned in my previous post, I have had opportunity to work with multiple different JavaScript libraries, and I often find myself running behind on the newest bug fixes for a given module. Many of the library development teams offer a nightly build available to checkout via SVN or Git (usually by way of GitHub), and I devised a way to automatically update my shared repositories among all the domains on my server. While not rocket science, nor an entirely new idea to most of you, it is quite helpful to me, and I thought I’d share my method here.

There are actually four steps involved with this update, so I apologize in advance if this gets too long.

Continue reading →

JavaScript libraries: jQuery vs. ExtJS

Often I have been asked which JavaScript library I prefer over all other, and the answer is not as easily orated as one might expect. Occasionally, I actually find someone willing to spend the time and thought involved with seeing the answer through to its conclusion. To avoid any undue future banter, I thought I would put my thoughts concerning the matter down in writing and simply reference this post when the topic is breached.

No, this will not be a comprehensive discussion and review of all available JavaScript libraries, but hopefully it will be sufficient to drive people to view the topic with a bit more of an open mind. Also, I must alert those who have come looking for a definitive answer from me: you will not receive a single library of choice here, but rather you will be given some insight to different perspectives requiring careful consideration when each library is being reviewed.
Continue reading →

jQuery Plugin: gwSlideshow launched

A while ago, I wrote a jQuery based slideshow that I shared with some friends, and I ended up getting a pretty good response to it – enough to merit making a full plugin with it. Here is the initial launch of the plugin and project, and I’d love to get any feedback pertaining to usability and additional features.

The intent is to remain very lightweight but flexible, and so far, that seems to be met. Following, you will find links to my Google Code project page as well as a sample script that demos the working slideshow. For any additional questions, please feel free to contact me.

Google Code: http://code.google.com/p/gw-slideshow/
Demo: http://code.guahanweb.com/jquery/demos/gwSlideshow.html

Enjoy!

Writing a Reusable AJAX Handler

Due to the number of questions I receive on various forums as well as the number of times I have run into the need for an AJAX response handler in my own work, I decided I would share one of my solutions in the hopes that it will save someone else some time as well. I assume, if you are reading this, that you have a basic knowledge of AJAX and the principles guiding the technology. In addition, basic understanding of how libraries such as jQuery perform AJAX queries and callback functions in JavaScript is a plus. For further reading on these prerequisites, check out this Google search and the jQuery docs.

After manually handling my responses in multiple projects, I finally decided to write a JavaScript object that could handle the XML responses for me and return me a usable object to my callback function. Enter the AJAX Handler object. I decided to let jQuery handle the actual requests for me, but I wanted a way to easily parse out my response, checking for errors and handle them accordingly. The result was something I have been able to use numerous times in different projects. To simplify things, let’s look at the code a piece at a time. At the bottom of this post, you will find the entire code. Continue reading →

JavaScript Libs and OOP

Those of you who work on client side scripting to any degree (XHTML, CSS, JavaScript, etc) are probably well familiar with some of the more common JavaScript libraries available. I have looked into different ones to some degree, and I have used a handful of them extensively before settling on one that best fits my needs. You see, as a developer, I love to conceive of my own patterns and objects to do things within my page, but I also don’t like having to delve into the innermost workings of the DOM unless absolutely necessary for optimization. This being said, for large scale applications like Content Management Systems (CMS) or administration panels, I like to use a themed, all inclusive solution like the Yahoo! User Interface Library (YUI) or ExtJS (an extension of YUI); however, when working with basic DOM manipulation or personal projects that require a lightweight solution, I have become enamored with the jQuery library.
Continue reading →