Simon Whatley » jquery

3 Free eBooks on jQuery

Simon — Tue, 19 Jul 2011 21:33:15 +0000

jQuery, a JavaScript library, is definitely something worth knowing. Here are some resources to help you learn and master it.

jQuery Fundamentals by Rebecca Murphey, with contributions from James Padolsey, Paul Irish and others, is a free e-book available in HTML. It includes an overview of JavaScript as its first chapter, to help developers get up to speed.
Essential JavaScript & jQuery Design Patterns by Addy Osmani is a free e-book of design patterns for those who already know jQuery but want to take their skills to the next level.
Official jQuery Documentation

Using Google-Hosted JavaScript Libraries with WordPress

Simon — Tue, 13 Apr 2010 15:00:19 +0000

With the announcement that Google will be including page loading times as part of it’s SERPs ranking algorithm, it has become increasingly important to optimise your use of 3rd-party libraries such as jQuery.

If you want — and this is the default setting for WordPress, themes and plugins — you can just download jQuery, put it on your server and link to it from your header.php file in the section.

However, it is better to use the proper wp_register_script() function, which can be achieved in your functions.php file:

if( !is_admin() ) {
   wp_deregister_script('jquery'); 
   wp_register_script(
   	'jquery',
   	("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"),
   	false,
   	'1.4.2'
   ); 
   wp_enqueue_script('jquery');
}

The reason we use the wp_register_script() is to ensure that WordPress and its themes and plugins are aware that the script has been loaded and therefore not to load an additional copy.

I have also used the is_admin() function to prevent conflict and therefore errors, in the WordPress administrator.

Of course, this method is not only restricted to jQuery, you can do the same for other popular JavaScript frameworks such as Mootools.

Further information on the wp_enqueue_script can be found on the WordPress Codex.

Using jQuery Auto-Complete with ColdFusion

Simon — Wed, 16 Jul 2008 17:28:05 +0000

Creating an autocomplete form field historically has not been a trivial matter and would require an indepth knowledge of JavaScript and CSS. However, the task is made far more simple when using one of the many freely-available JavaScript libraries. In this post I will show you how to implement the jQuery Autocomplete created by Dylan Verheul.

The Goal

Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

The latest copy of jQuery
A basic understanding of JavaScript
A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo will specifically look at a simple form text input field, which takes a country name.

See the demo, and others, in action

How It Works

Once the user begins to type into the form text input field, the jQuery autocomplete is activated. After a set time interval, a list of items is displayed below the input field. The user can select these with either the arrow keys or mouse.

The Code

There are three parts to this demo:

The page’s HTML.
The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
The jQuery & JavaScript.

HTML Form

Example 1.: Country Lookup

Using AJAX to interrogate the database.

Example data: Australia, Bulgaria, United Kingdom

NB. If you have Firebug installed you will be able to view the AJAX call.

ColdFusion

This is a simple example, using a database to return a list of country names that match the characters the user has input. You could expand this and return a JSON data structure.

 enablecfoutputonly="true">
 name="qryGetCountry" datasource="myDatasource">
SELECT countryName
FROM Country
WHERE countryName LIKE  value="#URL.q#%" cfsqltype="cf_sql_varchar" />

 query="qryGetCountry">
#qryGetCountry.countryName##chr(10)#

JavaScript

The JavaScript will attach itself after the document is ready, i.e. after the page has loaded. Each time the text input field, with the ID of country, is changed, the autocomplete event is fired. This makes a call to the ColdFusion page, which returns a list of matched items.

Where To Take It Next

JSON

The above example only shows a simple text list, separated by carriage returns. It is more preferable to use JSON.

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the jQuery autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download The Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

JavaScript Frameworks – Let There Be Light

Simon — Wed, 16 Jul 2008 17:27:58 +0000

For many web developers, whenever JavaScript is mentioned it provokes a rye smile; JavaScript is one of those programming languages that is rather avoided than embraced. This is not the fault of the language itself, but rather the browsers. A few years ago, the landscape of client-side scripting was a bleak scene. Browser inconsistencies, particularly with the dominant Internet Explorer, implementation bugs and numerous target platforms made developing client-side JavaScript a tricky undertaking.

To the consternation of these same developers, the landscape changed and Web 2.0 hit the mainstream. Almost overnight, every website on the internet wanted to use or was using AJAX. Marketers joined the bandwaggon and every feature requested had to involve something dynamic and revolutionary. Thus JavaScript development quickly hit the forefront of peoples minds and became as important as any server-side technology available at the time.

Over the next few blog posts, I will be using the popular frameworks jQuery, Yahoo! User Interface Library (YUI), ExtJS and Adobe’s Spry with ColdFusion to demonstrate various techniques, such as autocomplete and form validation.

jQuery 1.2 API Reference

Simon — Wed, 09 Apr 2008 10:55:25 +0000

Among the plethora of JavaScript libraries to have been released, few have been recognised to be as effective as jQuery. This lightweight library has been the subject of different discussions since it was launched in 2006. Basically, jQuery has the ability to flawlessly string together JavaScript together with HTML. Because of its effectiveness, there have different types of lightweight applications and plug-ins launched using jQuery. Ajax based websites that offers simple interface would virtually work together using jQuery’s simple interface.

Download the jQuery 1.2 API Reference (360KB).

More information can be found on the jQuery Website.