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

YAHOO.util.Connect, CakePHP, Json Data

Ajax, CakePHP, YUI

I’ve been upgrading an Intranet application that I created for a client. I created the front-end using YUI (Yahoo! User Interface Library) and I am working on migrating the back-end to CakePHP. After setting up CakePHP, my first step of integrating YUI with CakePHP is retrieving data ajaxally. The application was already using YAHOO.util.Connect to retrieve the data, but I had to change my parsing code due to the format of the Json data that is returned by CakePHP.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery 1.4, YUI: JSON ParseError – Quotes Required

Ajax, JQuery, YUI

Someone just sent me a message asking me to update my imBannerRotater plugin because they were receiving a parseerrormessage with JQuery 1.4.

I tested the plugin with JQuery 1.4 and I too received the parseerror message. I knew immediately that the problem was with the Json record that was returned via an ajax request. Looking at the json record, I noticed that quotes were placed around the value, but not the name/key, so I added the quotes:

?View Code JAVASCRIPT
// originally
{name: "joneil.jpg", url: "http://www.imdb.com/character/ch0005968/"}
 
// changed to
{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/"}

I tested and no longer received the parseerror message.

The reason I knew that the error was due to the json record is because I ran into a similar problem with YUI last week. I received a parse error with a json record because I used single quotes rather than double quotes. I thought it was odd (and I was a bit displeased).

Knowing about the problem with YUI and single quotes, I tested json object above using single quotes:

?View Code JAVASCRIPT
{'name': 'joneil.jpg', 'url': 'http://www.imdb.com/character/ch0005968/'}

I again received the parseerror message. So you must use double quotes. I went back and read the Json specs. It mentioned placing double quotes around the value, but did not mention anything about placing quotes (double or otherwise) around the the name/key. But YUI and JQuery 1.4 both require it so it must be required.

Checkout My New Site - T-shirts For Geeks

CakePHP and YUI: CSS File Location

Ajax, CakePHP, YUI

I recently started converting an existing PHP project to CakePHP and YUI 2.8. The first decision that I had to make was where to place the YUI CSS files. I tried to find a quick, yet elegant solution, but I ended up with solution that was not so quick (or elegant).

I copied all of my YUI files from webroot/js/yui/ to webroot/css/yui/. I then opened each folder under webroot/css/yui/ and removed all of the js files (leaving the assets folder). If a folder contained js files only, then I deleted the folder.

I opened each folder under webroot/js/yui/ and removed all asset folders and css files. If a folder contained css files only, then I deleted the folder.

I spent about an hour trying to find another solution, so I guess the few minutes it took to remove the files/folders was worth it.

Checkout My New Site - T-shirts For Geeks

YUI Dependency Configurator

Ajax, YUI

The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.

Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.

So instead of:

<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> 
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> 
<link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css">
 
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="lib/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="lib/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="lib/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="lib/yui/selector/selector-min.js"></script>

You can use the YUI Dependency Configurator to create::

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>

Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.

You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.

Checkout My New Site - T-shirts For Geeks

YUI Widget: imSliderMenu

yui-widgets

I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI Dialog Buttons Scope

Ajax, YUI

When calling a function to handle the click event for the YUI Dialog buttons, the scope of the function is always the dialog instance itself. This is not a problem in most situations, but when creating a custom YUI widgets, use the object literal option to handle the event rather than just calling a function. Otherwise, you will run into scope issues.

Continue reading

Checkout My New Site - T-shirts For Geeks