Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Archive for January, 2010

I’m redesigning my portfolio site and decided to use Joomla. I just installed it on my Ubuntu box. It wasn’t difficult, but it could have been easier.

First I downloaded Joomla from here. I had the option of download a nightly build, but I wanted the latest stable version.

Read the rest of this entry »

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

Read the rest of this entry »

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.

Read the rest of this entry »

I justed received an error when logging into a CakePHP app. It was the Auth Component error:

you are not authorized to access that location

It occurred when I attempted to create two session variables:

if ($loggedIn == 1) {
	$result = $this->User->findByUsername($this->Auth->user("username"));
	if ($result) {
		$this->Session->write('User.langID', $result['User']['language_id']);
		$this->Session->write('User.cntryID', $result['User']['country_id']);
		echo '{"type":"continue"}';
	}
}

Because one generally receives this error message when attempting to access a page that is secured by the Auth Component and ACL, I thought that the session component was attempting to write to a restricted area. After a bit of testing, I realized that the User session var (User.langID) was being used by the Auth Component. So I changed User to an application specific variable:

$this->Session->write('rdsStaff.langID', $result['User']['language_id']);
$this->Session->write('rdsStaff.cntryID', $result['User']['country_id']);

No more errors. I hope this will be useful to someone in the same situation.

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.

I recently received an email from one of my clients regarding an error that she was getting on her website. It was a missing table error. I had made some changes over a month ago which required me to add a ’states’ table. It was interesting because I knew that I had uploaded the table to her server and tested the new functionality.

I then remembered that the host provider had recently upgraded their servers (I use the same host provider). I ran into problems after the upgrade. Any changes that I had made on my site during the time of the upgrade were not reflected on the new server. I had draft posts that were no longer stored in the MySQL database.

To make a long story short (too late), I needed to test whether I created the ’states’ table during the same time frame as the upgrade. Because I always make and test changes on my computer prior to uploading to a server, I decided to query the table schema on my computer to find out when I created the states table. I knew that MySQL stores database, table, table columns (etc) in the information_schema database. I just wasn’t sure which table the information would be stored in. After a quick search, I found a TABLES table, but I did not know which field to query to find the creation date:

SELECT column_name 
FROM INFORMATION_SCHEMA.COLUMNS 
WHERE table_name = 'TABLES'

This gave me a list of field names in the TABLES table. I found the field CREATE_TIME.

SELECT create_time
FROM INFORMATION_SCHEMA.TABLES
WHERE table_schema = 'arrowcollegiatetour'
AND table_name = 'states'

I found that I created the ’states’ table during the same time frame as the server upgrades, so I sent my client a message telling her to contact the host provider and have them recreate her site from their daily backups. I just love MySQL.

Viewing CakePHP’s .ctp files in Aptana Studio has been quite annoying due to the lack of syntax highlighting. I have grown use to it until earlier today when I was converting a .php file into a .ctp. I knew there had to be a way to associate .ctp files with .php files in Aptana/Eclipse. I did a bit of searching and found the solution.

  1. Go to Window/Preferences/General
  2. Select Content Types
  3. In the right pane, select the Text Navigation tree
  4. Select PHP Content Type
  5. Click the Add button
  6. Enter *.ctp and click Ok

If you have a .ctp file open, you will have to close and re-open it to view the changes. Much better.

In my last post, I discussed the YUI imYUILogin widget that I created. In this post, I will demonstrate how to log in ajaxally using the imYUILogin widget with CakePHP and the AuthComponent. I’m assuming that you have already read the Simple ACL Controlled Application and have the AuthComponent configured correctly. I’m also assuming that you are familiar with the Yahoo User Interface Library.

Read the rest of this entry »

I created YUI 2 login widget, imYUILogin, for an intranet project that I am working on. I originally created it as a Dialog Container, but I recently updated it so that it could be configured as a Panel or a Module. Logging in is done ajaxally, of course.

Read the rest of this entry »

I’m working on a project that uses the JScrollPane JQuery Plugin to scroll a number of records. My client wanted the scroll bar to have a variable height (like most modern scroll bars). The height of the scroll bar should be determined by the number of records – the height should decrease as the number of records increase. So the scroll bar height is inversely proportional to the number of records.

Read the rest of this entry »