Multiple Combo boxes with YUI and CakePHP

Ajax, CakePHP, YUI

As a developer, I hate writing similar code for the same process over and over again. Just like highly optimized database design, developers should always try to write code as efficiently as possible.

I’m working on a project where I use YUI and CakePHP to fill multiple combo boxes on a page using Json data. At first, I wrote separate code with the same functionality for each combo box. Every time I needed to change the functionality, I had to change it for each combo box. After doing this multiple times, I decided to combine the functionality on both the front-end (YUI) and the back-end (CakePHP).

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI: An Input Field Calendar Widget

Ajax, YUI, yui-widgets

I am working again on a project that uses the Yahoo User Interface Library (YUI). One of the requirements for the project is an input calendar field. When I first began the project, I created an event listener (Event.Listener) as discussed in a previous post.  But, because a date field is fairly common in web applications,  I wanted to create a widget so that I would not have to duplicate the process in future projects. To my surprise, YUI does not already have a widget with this functionality, so I decided to create one. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using the YUI Loader Utility

Ajax, YUI

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies into your page via script. While I haven’t used the YUI Loader Utility that often, I like using the utility beacause I don’t have to remember all of the dependencies needed by each component. In addition, I can use the loader utility to load any custom plugins.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI: Using Event.addListener. One Calendar, Multiple Fields

Ajax, YUI

I am working on a YUI application where I have multiple date fields. The date fields are regular input fields. When a user clicks on the input field a YUI Calendar appears. When a date is selected from the calendar, the date value is inserted into the appropriate input field.

Continue reading

Checkout My New Site - T-shirts For Geeks

Yahoo User Interface Library Method Shortcuts

Ajax, Pebblet, YUI

One of the aspects of developing with the Yahoo User Interface Library (YUI) that I do not particularly like typing the long method calls (i.e., YAHOO.util.dom.get). Fortunately, I can create shorcuts to eliminate much of the typing. I generally add these shortcuts to the top of an anonymous function:

(function() {
     var Dom = YAHOO.util.Dom,
     Event = YAHOO.util.Event,
     Selector = YAHOO.util.Selector,
     Calendar = YAHOO.widget.Calendar,
     Dialog = YAHOO.widget.Dialog;
     ...

})();

So if I need to instantiate the Calendar widget,  I can type:
var calCal = new Calendar("appointCal", {
     iframe:false
});

instead of:
var calCal = new YAHOO.widget.Calendar("appointCal", {
     iframe:false
});

Also, I recently started using $ to replace Dom.get:
var Dom = YAHOO.util.Dom,
$ = Dom.get;

So instead of typing:
var fld = Dom.get('whatever');

I now type:
var fld = $('whatever');

YUI code can be very verbose, so any shortcut is helpful.

Checkout My New Site - T-shirts For Geeks

YUI Selector Utility: CSS3 Attribute Selectors and Pseudo-classes

Ajax, Pebblet, YUI

I have been using the YUI Selector Utility for a few months, but I just recently discovered how powerful it really is. I have been converting my imValidateForm JQuery plugin into a YUI widget. One of the validations this widget checks is whether a set of radio buttons are checked. I originally created validation object with pure Javascript. To determine whether the radio buttons were checked, I created the following code:

?View Code JAVASCRIPT
var flds = document.getElementsByName(‘gender’);
var nL = flds.length;
for (var j=0; j<nL; j++) {
     if (flds[j].checked) {
          ischecked = true;
          break;
     }
}

This is so verbose when compared to the YUI implementation of the same code:

?View Code JAVASCRIPT
var ischecked = (YAHOO.util.Selector.query('input[name=gender]:checked').length > 0) ? true : false;

Not only am I able to use the CSS3 Attribute Selector and Pseudo-classes, I can combine the two to create more succinct code. Marvelous.

Checkout My New Site - T-shirts For Geeks

YAHOO.util.Dom.batch

Ajax, Javascript, YUI

I have been trying to find a YUI method that is similar to the JQuery $.each method, but the closest thing I could find for the current version of YUI is YAHOO.util.Dom.batch (YUI 3 has an ‘each’ method, but I haven’t explored it thoroughly). While this method is not as powerful as JQuery’s $.each (see example), it is still a very good replacement for a Javascript ‘for’ loop when iterating over a DOM collection.

Continue reading

Checkout My New Site - T-shirts For Geeks

Scope Correction with YUI

Ajax, Javascript, YUI

The more I use the Yahoo User Interface Library (YUI), the more I am impressed with it. I have been converting my JQuery imValidateForm plugin to a YUI widget for a project that I am working on. I ran into a scope issue when a button was clicked. I have dealt with Javascript scope issues in the past, but I did not know how to fix it using YUI.  Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo vs JQuery, Part 1

Dojo, JQuery

Although I had created a few code snippets using Scriptaculous/Prototype, Dojo Toolkit was the first Javascript Framework that I really learned. I had read about (and downloaded) it quite a few years before I actually used it. I purchased a couple of books (Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers) and Dojo: The Definitive Guide) to help me get started. I was working on a project where web pages would be dynamically created. I have to admit, I struggled. Although Dojo is a  “Javascript” Framework, learning it was like learning a new language – before the discovery of the Rosetta Stone. While I was able to learn the basics from reading the books and looking at the examples on Dojo’s website, in many cases, I just could not find the documentation to do what I wanted to do (or how I wanted to do it). So I guessed. And guessed again. And continually guessed until, “Eureka!”. No that didn’t work either…

Continue reading

Checkout My New Site - T-shirts For Geeks