Drupal: Dependent dropdowns with jQuery

Ajax, Drupal, Javascript, JQuery, PHP

I have told my co-workers on many occasions that Drupal doesn’t do true Ajax. With true Ajax, elements change without a page refresh and only the relevant elements are affected. With Drupal, the elements change because the entire form is refreshed. For instance, if you use Drupal’s Ajax to make the values of one dropdown dependent upon the selected value of another, the entire form has to be refreshed in order for the second dropdown to be updated (See Ajax Example: Dependent Dropdown). Although, there are times when I do use Drupal’s Ajax in this scenario, I much prefer to use jQuery.

Continue reading

Checkout My New Site - T-shirts For Geeks

Standardizing jQuery in Magento Extensions and Themes

Ajax, E-commerce, JQuery, Magento

I’m not that familiar with Prototype (Magento’s default Javascript library), so I use jQuery with most of the Magento extensions that I create. Although I use $.noConflict to avoid conflicts with Prototype and other jQuery versions, there are times when multiple versions of jQuery are loaded. This generally causes Javascript errors with either my extension or another extension/theme that is loaded on the page (depending upon which is loaded first).

To avoid conflicts for future Magento theme and extension developers, I created the jQuery Update extension. Similar to Drupal’s jQuery Update module, this extension will standardize the use of jQuery and jQuery UI within Magento.

Continue reading

Checkout My New Site - T-shirts For Geeks

Creating a Magento Extension that uses a jQuery Plugin

Ajax, API's, E-commerce, JQuery, Magento, plugins

While developing the DevoutGeek.com site, I created a number of Magento extensions. The first extension that I created was Configurable Colors. This extension creates color swatches in place of the color drop-down for configurable products. I created a jQuery plugin to display the color swatches and make ajax calls to the extensions controller method to display the relevant images. Through a bit of trial and error, I learned a great deal about creating Magento extensions (and incorporating jQuery into them).

There are many articles that discuss how to create Magento extensions, so this post discusses how to incorporate a jQuery plugin into the extension. For information on how to create an extension, read this.

Continue reading

Checkout My New Site - T-shirts For Geeks

Creating a Photo Gallery with Django and jQuery

Ajax, Django, JQuery, Python

As part of the Mobile Theme Generator, I had to create a Photo Gallery in order to display the header images. As stated in previous post, I created the Mobile Theme Generator using Django and jQuery Mobile. Although there are probably plenty of Django-based Photo Gallery apps, I thought that it would be easier to integrate a custom Photo Gallery into a generator, so I decided to build it myself.

Continue reading

Checkout My New Site - T-shirts For Geeks

jQuery: Dynamic Form Creation/Submission – IE8 Bug

Ajax, JQuery

I noticed a problem with IE8 today. I dynamically created a form and submitted it with jQuery. The form did not submit in IE8, but worked in all the other browsers that were tested (Firefox, Chrome, Safari). The code is quite simple:

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var id = jQuery('#product_id').val();
	jQuery('#content').append(
		jQuery('<form></form').attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
			jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	));
});

Again, this worked fine in other browsers. Upon further inspection, I found that the IE8 seemed to strip the quotes from around the form attributes:

<form name=frmReturnToProductPages id=frmReturnToProductPages action=/provisioning/product-pages />

To fix the problem, I decided to add the form attributes after appending the form to the page.

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var frm = jQuery('<form></form>').appendTo(jQuery('#content'));
	jQuery(frm).attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
		jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	).submit();
});

I tested this with the IE8 developer tools and the form submitted successfully. Enjoy.

Checkout My New Site - T-shirts For Geeks

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Web 2.0 Domain Name Generator

Cool Sites

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.

Checkout My New Site - T-shirts For Geeks

ActionScript: Setting up ExternalInterface on Linux

Actionscript, Flash, Ubuntu

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

ActionScript: Using Lightbox With Flash

Actionscript, Flash, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks