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…”

Posts Tagged ‘Json’

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 »

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’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 »

I recently had to update my imGoogleMaps JQuery Plugin due to problems that arose from the Geocode request rate limitations. As I researched the problem, I delved even more into the Google Maps API. Although this is a minor release, I decided to add custom marker icons to this version. Now you should be able to easily add custom markers to your Google Maps without having to worry about creating the underlying Google Maps API code – JQuery and the imGoogleMaps plugin helps you create a customized map in the fraction of the time. I also added the ability to display a phone number and a description for each address in the infoWindow.

Read the rest of this entry »

I created a JQuery Plugin, imValidateForm. As the name suggests, the plugin is used to validate forms. In this post, I will discuss how to use the imValidateForm plugin with CodeIgniter.

Read the rest of this entry »

I have recently been updating the JQuery imGoogleMaps Plugin that I created earlier this year. The new version of the plugin will display multiple addresses on a Google Map. I’ll discuss the updated version of the imGoogleMaps plugin in another post. In this post, I’ll discuss how to use JQuery to load multiple addresses from Json data.

Read the rest of this entry »

I use Javascript Objects quite frequently when I am developing web applications. These objects are very flexible and are easy to create and easy to manipulate. In this post, I will discuss how I use Javascript Objects to store and retrieve application data.

Read the rest of this entry »

If you are using an Ajax Framework with CakePHP and receive the error message “Missing View”, then you need to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
}

Also, if you have debug turned on, you will receive a Parse error when JSON data is returned back. CakePHP set the debug level to 2 by default. You can turn it off in the app/config/core.php file by setting the debug level to 0. YOu probably don’t want to do this in the development environment. A better solution is to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
     if ( $this->RequestHandler->isAjax() ) {
          Configure::write ( 'debug', 0 );
     }
}

This let’s CakePHP know that it is an Ajax request. If you use this method, make sure that you add the RequestHandler Component to your controller.

class MyController extends AppController {
        var $components = array('RequestHandler');
}

I created simple JQuery plugin that rotates images on a page. Actually, there are two modes. In the default mode, the plugin will display a randomly selected image. In the other mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image.

Read the rest of this entry »