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 June, 2009

mac, PHP

A few days ago, I was testing a PHP class I created that uploads images and creates thumbnails. I ran into an error when I called imagecreatefromjpeg. phpInfo() revealed that the GD Library was not installed on my Mac G5. All the sites I visited said that I would have to recompile PHP with GD support enabled. I considered working on my PC rather than recompiling PHP, but my Mac has become my primary development box, so I knew that I would need the GD Library for future projects.

Initially, I considered a new entropy PHP package. I used the entropy version a few years ago, but I ran into problems after I installed Leopard. I was fairly confident that entropy would now “play nice” with Leopard, but I wasn’t sure what it would do to my existing MySQL database.

I then considered using MacPorts to install PHP, but decided against it, because I wanted to use my existing infrastructure, not a re-installation of everything (Apache, PHP, and MySQL). If you haven’t yet started any development on your Mac, then I recommend that you use the MacPorts package. I found great instructions here.

So I made the decision to just recompile PHP with GD Support. After a few hours, I began to think that this was not a good decision. I was following the step-by-step instructions that I found here.

First I had to download and install a new version of Xcode because during one of the steps, I received the error, “C compiler cannot create executables”. Although Xcode was already installed on my Mac, it was an older version.

I then received an error when I tried to compile the GD Library (under the section: Download and Compile GD Graphics Library extension). The error was due to the t1lib not being installed. I recommend that you do a search for the t1lib after you install Xcode. If it is not present, you can go here for download/installation instructions.

One of the last steps involves confirming that PHP is loading the gd.so extension.

/usr/bin/php -i|grep -i gd

I received the error:

PHP Warning:  PHP Startup:
Unable to load dynamic library '/usr/lib/php/extensions/no-debug-non-zts-20060613/gd.so'
- (null) in Unknown on line 0

I simply copied the gd.so file from /SourceCache/php-5.2.8/ext/gd/ to /usr/lib/php/extensions/no-debug-non-zts-20060613/. I then received the confirmation:

gd
GD Support => enabled
GD Version => bundled (2.0.34 compatible)

Additional Notes

1. Under the section, “Download and compile the GD graphics library extension”, the step refers to php 5.2.6. I changed it to php 5.2.8. Actually, I opened my browser and navigated to: http://opensource.apple.com/. I then selected the version of Mac OS X that I am using (10.5.7). I then scrolled down the list and selected apache_mod_php-44.2 and found php-5.2.8.tar.bz2. So my curl statement was:

curl -O http://www.opensource.apple.com/darwinsource/10.5.7/
apache_mod_php-44.2/php-5.2.8.tar.bz2

2. A few of the steps require you to type:

make install

You really have to type:

sudo make install

or you will receive an error. Enter your password as required.

While recompiling PHP with GD support is not for the faint of heart, it can be done. Now I can get back to work.

Share

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.

Read the rest of this entry »

Share

I recently ran into a problem using CodeIgniter where I kept receiving the error: “Call to a member function on a non-object”. This problem occurred when I was trying to use a method from one model from within another model.

I have a model named mGalleryImages. Within this model, I have a method named addGalleryImages. Within this method, I load another model and tried to call a method from the loaded model:

function addGalleryImages(){
     ...
     $this->load->model('mUtilImages');
     ...
     $this->mUtilImages->setImageFile($_FILES['uploadFile']);
}

I receive the error when the setImageFile method is called. The problem is that when the model sees “$this”, it is looking for a method within the mGalleryImages model. The solution was to use a CodeIgniter function named get_instance().

function addGalleryImages(){
     ...
     $CI =& get_instance();
     $this->load->model('mUtilImages');
     ...
     $CI->mUtilImages->setImageFile($_FILES['uploadFile']);
}

Easy enough, but I would never have thought that this was the problem. I played with this code for hours, trying to figure out why it didn’t work similarly to a regular PHP class. But now I know.

Share

I often need to know the id of the last inserted record into a table. In the past, I’ve used a PHP function:

function getLastInserted($table, $id) {
	$query = "SELECT $id as maxID from $table where $id = LAST_INSERT_ID()";
	$result = $this->runQuery($query);
	$row = mysql_fetch_row($result);
	return $row[0];
 }

To duplicate this using CodeIgniter’s Active Record, I could write:

function getLastInserted($table, $id) {
	$this->db->select_max($id);
	$Q = $this->db->get($table);
	$row = $Q->row_array();
	return $row[$id];
 }

But, I learned that there is an even faster way that uses one of CodeIgniter’s Helper functions. Immediately after a record has been inserted into the database, I simply call:

$id = $this->db->insert_id();

Although, I am not sure how CodeIgniter knows which field is the primary key, it seems to work.

Share

Before I begin to learn any new language, I generally purchase a book or two. A few months ago, I purchased the book, “Professional CodeIgniter”. This is a really good book in that I could copy/paste/tweak much of the code from the book for an application that I was working on. I learned the basics and then some (integrating Ajax, TinyMCE, etc). I highly recommend it.

Share

I am fairly new to the PHP framework scene. I have been using CodeIgniter for about 3-4 months and I have found it to be quite straightforward.  I have been able to develop websites quickly using an understandable structure.

When I first began defining constants with CodeIgniter, I used a method that I learned in the book, “Professional CodeIgniter
“. I placed all of my constants at the bottom of the config.php file (system/application/config/config.php).

$config['jquery_assets'] = 'assets/js/jquery/';

To access the configuration item in my application, I would write something like:

$this->plugin = base_url() . $this->config->item('jquery_assets') .'imgooglemaps/jquery.imGoogleMaps-0.5.js';

While this works fine, I really wanted to define constants in the traditional PHP way. I recently noticed a file named constants.php (system/application/config/constants.php). Here, I am able to define application constants like a traditional PHP application.

define("GAL_THUMB_MAX_W", 120);

I think that I will use the constants.php file from now on.

Share

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.

Read the rest of this entry »

Share

I don’t consider myself a poet, but I have written a few poems in the past. My oldest child, Taylor, just graduated from highschool so I decided to write her a graduation poem. I couldn’t think of a name for the poem, so I just call it “Whatchamacallit: Ode To Taylor”.

Read the rest of this entry »

Share

CSS

I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     height:100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;
}

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>
</div>

Easy enough.

Share

I recently downloaded a great set of  web 2.0 gradients for Photoshop. The ‘Ultimate Web 2.0 Gradients’ can be found here.

Share