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 ‘JQuery’

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Read the rest of this entry »

Share

I purchased the domain name digitalvilliage.com quite a few years ago. I wasn’t sure what I was going to do with it when I first purchased the name (but I knew that it was a great domain name). Although I still haven’t decided what the focus of the site should be, I decided, for now, to create a web 2.0 domain name generator on the site. I developed the site using CakePHP and jQuery. I created a JQuery plugin to provide the domain names ajaxally (a term that I added to wikipedia – and yes, I already purchased the domain name) .

The site divided into two subdomains (web20.digitalvilliage.com and galleries.digitalvilliage.com). I’ll discuss the galleries subdomain in a later post.

I’ve seen other web 2.0 domain name generators, but my site offers more than just web 2.0 domain name generation. The site contains two main buttons (web 2.0 and suggest)

Click the web 2.0 button and a domain name will be dynamically generated.

I you click the suggest button, a dialog box will be displayed with a name input field and a category dropdown. The categories are: automotive, art, books, business, clothing, computers/internet, entertainment, health/fitness, money/finance, music, politics, popular, romance, travel, and urban dictionary.

After entering a name and selecting a category, a list of domain names will be displayed. You can then click on the name and click the search button to find whether the name is available. If you click on a name from the ‘urban dictionary’ category, a popup will be displayed with the definition from urbandictionary.com. I’ve only added 40-50 names from urbandictionary.com – I plan to add more later.

After entering a name from the suggest or clicking the web 2.0 button, you can then search for the availability of the name.

If a domain name exists, the Google Page Rank, Alexa Rank, Google, Yahoo, and Bing BackLinks counts will be displayed. You will also be provided a link to the whois database for that name as well a link to Alexa Stats.

If the domain name does not exist, you will be provided a link to a number of domain name registrars.

I worked on this site on-and-off for about 6 months (whenever I had the time). I think that it’s pretty cool. The site provides an Ajax web 2.0 domain search generator and an Ajax domain search tool. Let me know what you think.

Share

I have nearly completed my new portfolio site. I developed the Flash Movie on my Windows machine, but the rest of the development (Joomla, etc) has been done on my Ubuntu box. I’m using ActionScript’s ExternalInterface Class for this project. During integration, I learned that the Javascript code on Linux is a bit different than the code needed for Windows.

Read the rest of this entry »

Share

I’m working on a portfolio site where I’m using Flash to display my work. When a user clicks on a link for a website that I designed, they will be taken to the actual website. But when the user clicks on the link for book cover or magazine, I want the large image to be displayed using lightbox (A JQuery Plugin). The primary reason is that I want to use lightbox is because the Flash movie has a height of 225 pixels – not nearly enough to display a large image. Surprisingly, with the help of ActionScript’s ExternalInterface Class and JQuery, creating this functionality was easier than I thought.

Read the rest of this entry »

Share

I needed to add Dropdown menus to a site that a designed using Drupal. I found a few modules (Nice Menus, etc) that would enable me to easily add dropdown menus to my site, but I wanted to use the CSS Drop-Down Menu Framework that I discussed in a previous post. With a little help from JQuery, I was able to add dropdown menus to my site without having to use a Drupal module.

Read the rest of this entry »

Share

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.

Share

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 »

Share

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 »

Share

Although Prototype is the default Javascript Framework for CakePHP, using JQuery (or any other Ajax Framework) with Cake could not be easier. Perhaps the most difficult aspect of integrating JQuery with Cake was trying to find documentation on some of those little things that are necessary to return a result set without an error (see my post, CakePHP and Ajax: Missing View).

Note: I purposely wrote this post as if I were speaking to someone who has never used CakePHP. So some parts of this post may be common knowledge to the more experienced Bakers.

Read the rest of this entry »

Share

I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.

Note: Version 1.0 of the imBookFlip plugin has been released (12-28-2011). The primary change was to re-create the plugin using an Object Oriented approach. Please read the bottom of this post to view the changes.

Read the rest of this entry »

Share